We Keep Coding

Mobile menu - CSS / DIV - Dim visible background around menu?

When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}

One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>

Liquid filling text with animation

I am trying to get a CSS animation to make a text like it's filling with liquid. I've followed an example (Filling water animation) but what I need is doing the same with a text, not a circle.
Can I do it only using CSS? I don't need to correlate percentaje text with how much does the text fills. I mean, if I write 73% I don't need to automatically fill until 73% capacity.
#banner {
width: 300px;
height: 300px;
position: relative;
background: #ccc;
border-radius: 50%;
overflow: hidden;
}
#banner::before {
content: '';
position: absolute;
background: #ff0019;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
#keyframes wipe {
0% {
height: 0;
}
100% {
height: 73%;
}
}
<div id="banner">73%</div>

Here is text that fills like liquid.
Works great in Chrome but needs tweaking in Firefox.
#banner {
position: relative;
overflow: hidden;
font-family: sans-serif;
font-size: 40pt;
font-weight: bold;
background: #ccc
}
.inner {
background: #000;
color:#fff;
mix-blend-mode: multiply;
}
#banner::before {
content: '';
position: absolute;
background: #0f0;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
#keyframes wipe {
0% {
height: 0;
}
100% {
height: 73%;
}
}
<span id="banner">
<span class="inner">73%</span>
</span>

How to create a smooth animated flowing button?

I'm planning to change all the input[type=submit]s & buttons in my website into this smooth animated flowing button.
So, how do I create this using HTML, JavaScript & CSS? Especially I made this GIF to post it in Stack Overflow. And I don't think, I've to post some codes in this question to explain it. :/
EDIT: I don't want exactly Curls effect with bottom right to top left. It should start affecting from the area I click. In the next GIF I've clicked in the middle. Now please see the affect.
I hope you can understand what I mean. It should start flowing to the outside from the exact area I click.

You can use hover.css, Checkout background transition in that
http://ianlunn.github.io/Hover/ .
If you want exactly like the one you posted. you can always try some trial and error with hover.css

you can easily make with simple css see this click

Hope this helps!
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
overflow: hidden;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<button class="button">Click Me</button>

Please check this , hope it is helpful.
a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}
a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}
a:hover:after {
transform:scale(1);
transition: all ease .6s;
}
<span>Test</span>

can be achieved by a small tweak from "Abhitalks" answer from this question!
In html :
<div class="outer_box" id="btn">
<span>Button text</span>
<div id="dummy"></div>
</div>
css :
.outer_box{
background-color: transparent;
width: 400px;
height: 400px;
position: relative;
border: 1px solid silver;
text-align:center;
}
#dummy {
position: absolute;
top: 400px; left: 400px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
Script :
$('#btn').on("click", function() {
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
//and any action to be done on click :)
});

Center element with animation / transition

I'm trying to create a full screen menu that does a bottom-to-top movement and I'm having trouble when it comes to vertically centering it.
Basically, it comes out of the screen and should end up right in the middle of it (centered).
However, since it is a fixed menu with an unknown height and I'm using animations, the options available aren't many:
I can't use the margin: auto technique because the auto value doesn't work with transitions;
I'm trying to avoid using flexbox;
translateY() seems to work fine but it creates a top-to-bottom movement instead of the desired bottom-to-top one (see my code)
anything else? (preferably that works with older browsers, but I can also manage with using translateY if there's a way to change the direction)
$('#small-nav-btn').click(function() {
$('#overlay').addClass('open');
$('#close-menu-cross').addClass('open');
$('#nav').addClass('open');
})
$('#cross').click(function() {
$('#overlay').removeClass('open');
$('#close-menu-cross').removeClass('open');
$('#nav').removeClass('open');
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Now-Regular", sans-serif;
font-size: 12px;
font-weight: bold;
}
ul {
list-style-type: none;
}
a {
color: black;
}
#overlay {
background: #fff;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0;
transition: all 1s ease 0s;
z-index: 1555;
}
#overlay.open {
opacity: 1;
height: 100%;
}
#small-nav-bar {
display: block;
width: 80%;
margin: 0 auto;
text-align: center;
color: black;
}
#small-nav-btn {
cursor: pointer;
}
#nav {
background: orange;
position: fixed;
top: -100%; /*I need it to be bottom: -100% for the bottom-top movement*/
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.8s linear 0.1s;
z-index: 1556;
}
#nav.open {
top: 50%; /*Again, I need this to be bottom: 50%*/
}
#close-menu-cross.open {
display: block;
position: fixed;
top: 15px;
right: 20px;
z-index: 1556;
cursor: pointer;
}
#close-menu-cross {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-container">
<div id="small-nav-bar">
<div id="small-nav-btn">BUTTON</div>
</div>
<ul id="nav">
<li><span>HELLO</span>
</li>
<li><span>HELLO</span>
</li>
</ul>
<div id="close-menu-cross">
<div id="cross">X</div>
</div>
</nav>
jsfiddle
Thanks in advance! :)

You were quite close. With just a few adjustments in the CSS, you have a full working demo:
$('#small-nav-btn').click(function() {
$('#overlay').addClass('open');
$('#close-menu-cross').addClass('open');
$('#nav').addClass('open');
})
$('#cross').click(function() {
$('#overlay').removeClass('open');
$('#close-menu-cross').removeClass('open');
$('#nav').removeClass('open');
})
#nav {
background: orange;
position: fixed;
top: 100%; /* 1 */
left: 50%;
transform: translate(-50%, 0); /* 2 */
transition: all 0.8s linear 0.1s;
z-index: 1556;
}
#nav.open {
top: 50%;
transform: translate(-50%, -50%); /* 2 */
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Now-Regular", sans-serif;
font-size: 12px;
font-weight: bold;
}
ul {
list-style-type: none;
}
a {
color: black;
}
#overlay {
background: #fff;
opacity: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 0;
transition: all 1s ease 0s;
z-index: 1555;
}
#overlay.open {
opacity: 1;
height: 100%;
}
#small-nav-bar {
display: block;
width: 80%;
margin: 0 auto;
text-align: center;
color: black;
}
#small-nav-btn {
cursor: pointer;
}
#close-menu-cross.open {
display: block;
position: fixed;
top: 15px;
right: 20px;
z-index: 1556;
cursor: pointer;
}
#close-menu-cross {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-container">
<div id="small-nav-bar">
<div id="small-nav-btn">BUTTON</div></div>
<ul id="nav">
<li><span>HELLO</span></li>
<li><span>HELLO</span></li>
</ul>
<div id="close-menu-cross">
<div id="cross">X</div>
</div>
</nav>
Notes:
The CSS offset properties (top, bottom, left, right), when applied to absolutely-positioned elements (which includes position: fixed), shift the element x-distance from the respective edge.
You have top: -100% in your code. This puts the element 100% above the top edge.
You then have it shifting to top: 50%. This puts the element halfway inside the container.
Essentially, your animation moves the element a distance of 150%, from above the window to inside it. The movement is top to bottom.
But you want the movement to go from bottom to top.
So start the element all the way at the bottom and off-screen (top: 100%), and have it shift up to halfway inside the container (top: 50%).
The transform: translate() rule simply fine-tunes the centering.
If translateY(-50%) is applied to the primary state (like in your code), it will shift 50% of the nav onto the screen before the transition (demo).
That's why I applied translateY(-50%) only to the transitioned state.
For a complete explanation see my answer here: Element will not stay centered, especially when re-sizing screen
jsFiddle

Hover over text jQuery

I'm running into a problem, and I'm not quite sure how to solve it.
Currently, when one hovers over this particular picture, the opacity drops down (revealing a background color) and type appears. The problem, is that I want it to continue to act as if it is hovered over, even when they hover over the type.
Should I try changing the z-index? For some reason that didn't work...
JSFIDDLE http://jsfiddle.net/4jrUp/
HTML
<a class="bg" href="">
<h1 class="first_title">FrameMonkey</h1>
<img class="portfolio-item" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
<h3 class="first_description">A project that I've been working on since June - check back soon to see it in my portfolio!</h3>
</a>
CSS
.portfolio-item:hover {
overflow: hidden;
z-index: 1;
opacity:0.1;
}
.portfolio-item, .bg {
height: 200px;
width: 200px;
left: 0px;
border-radius:25px;
position:absolute;
}
.bg {
background-color: rgba(48, 48, 48, 0.9);
top: 100px;
display:inline-block;
}
.first_title {
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
Javascript
$(".portfolio-item").hover(function () {
$(".first_description").css("opacity", "1");
$(".first_title").css("opacity", "1");
}, function () {
$(".first_description").css("opacity", "0");
$(".first_title").css("opacity", "0");
});
Thanks!

You actually don't need jQuery for this.
UPDATED EXAMPLE HERE - ( I added an optional transition in there too.. )
Make the parent element, .bg, block level, and set the border-radius and dimensions on it. The important part is that it's relatively positioned so that the children elements are absolutely positioned, relative to the parent.
.bg {
background-color: rgba(48, 48, 48, 0.9);
position:relative;
height:200px;
width:200px;
display:block;
border-radius:25px;
overflow:hidden;
}
The :hover part is quite simple actually, all you do is change the opacity.
.bg:hover .first_title, .bg:hover .first_description {
opacity:1;
}
.bg:hover .portfolio-item {
opacity:.1;
}
And the rest of the CSS:
.portfolio-item {
height: 200px;
width: 200px;
position: absolute;
}
.first_title, .first_description {
position: absolute;
color: white;
padding: 10px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 1;
opacity: 0;
}
.first_title {
font-size: 15pt;
}
.first_description {
top: 50px;
font-size: 12pt;
}

Try adding the hover event to the .bg instead of .portfolio item, that way you can remove the z-index.
The jQuery change
$(".bg").hover(function () {
$(this).children(".first_description").css("opacity", "1");
$(this).children(".first_title").css("opacity", "1");
}, function () {
$(this).children(".first_description").css("opacity", "0");
$(this).children(".first_title").css("opacity", "0");
});
And the CSS change
.first_title {
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
See this fiddle