I'm currently editing a subreddit on reddit.com and my methods are restricted on CSS only.
I managed to get a overlay effect when you hover over the menu on the left side. It's fading in, but I don't know how to fade it out. Since transition wasn't working I tried another method with an animation.
TL;DR: Overlay fade in: yes - fade out: no :(
Here are some parts of the code I used:
#sr-header-area .drop-choices:hover:before {
content: "";
font-size: 13px;
display: block;
position: fixed !important;
height: 100%;
width: 100%;
margin-left: 300px;
pointer-events: none;
z-index: 700 !important;
animation: fade 0.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
#keyframes fade {
0% {background-color: rgba(0, 0, 0, 0);}
100% {background-color: rgba(0, 0, 0, 0.4);}}
Maybe someone can help me out here.
You should be able to achieve this effect with transitions and that would be the way I'd personally recommend. Heres a quick implementation: https://jsfiddle.net/z1c8bvcd/1/
The main thing to remember is that you need to define the CSS properties that the div will return to once the hover state is no longer in effect, not just what they look like when hovered otherwise the :before pseudo element will be removed from the DOM.
#foo:before {
content: "";
background: rgba(255, 255, 255, 0);
transition: background 0.5s, margin-left 0.5s;
width: 100%;
height: 100%;
position: fixed!important;
margin-left: 50px;
}
#foo:hover:before {
background: rgba(0, 0, 0, 0.3);
margin-left: 300px;
}
I think you can also achieve a similar effect using keyframes, but I think the animation would run once when the page loads and then whenever the div is hovered.
Related
I have a modal for which I have created a backdrop. I want the backdrop to blur everything behind it, but since while showing the modal, there are some FPS drops and looks a bit laggy, I have decided to apply a transition with a delay to it. Unfortunately, the transition doesn't seem to apply to the backdrop-filter property for a reason I was not able to detect.
Here is the CSS applied to the backdrop:
.Backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
backdrop-filter: blur(2px);
transition: backdrop-filter 500ms 2s;
}
With this CSS applied, the application of the backdrop-filter property still happens instantly at the moment when the modal is shown. What am I missing?
Transitions enable you to define the transition between two states of an element. Your backdrop never changed state (it had the property backdrop-filter: blur(2px) since the page was loaded), so the transition doesn't take effect.
What you're looking for is an animation:
.backdrop {
background-color: rgba(0, 0, 0, 0.25);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
animation: blur-in 500ms 2s forwards; /* Important */
}
/* Let's define an animation: */
#keyframes blur-in {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(2px);
}
}
Some text for testing the blur.
<div class="backdrop"></div>
I've created a simple modal window (with help) and I understand how it functions to make the background dark after clicking the corresponding link. I can't quite seem to figure out how to make the background-image that I currently have become blurry upon clicking, however. I was hoping to do it fully in css.
Here is what I have so far. What I want the background-image to look like is achieved by using filter: blur(5px);
I think the issue is relating to the fact that I don't entirely understand how the :target function works.
/* Design Modal Window */
/* .modal_style {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px black;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
} */
Essentially instead of background: rgba(0, 0, 0, 0.8); I want the background to blur, but when I put the filter element in its place it blurs the modal window and not the background.
You can't use blur on the parent, and disable it on the child. You have to create two divs on the same level. Here is an example:
.modal-content{
height:150px;
width:200px;
position: absolute;
background-color:white;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.modal-background{
filter:blur(5px);
position:absolute;
width:100%;
height:100%;
}
<div class="modal-background">
<image src="https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962_960_720.jpg"></image>
</div>
<div class="modal-content">
This a modal
</div>
I have a div with a background image. I want to be able to set a black transparent overlay on hover. How can I achieve this?
This is what I have so far
div {
background: url('map-tracks.png');
background-size: cover;
transition: background-color 1s;
&:hover {
background-color: rgba(0, 0, 0, 0.5);
}
}
Assuming you actually want to see the background image still, use a pseudo element.
div {
background: url('http://via.placeholder.com/200x200');
background-size: cover;
transition: background-color 1s;
width: 200px;
height: 200px;
}
div:hover:after
{
background: rgba(0, 0, 0, 0.50);
content: '';
position: absolute;
width: 200px;
height: 200px;
}
<div></div>
Put an overlay (a div or something else) with absolute or relative positioning and with the proper black-semi transparent styling. Anyway you need another object for the overlay.
I need help my css transition because it seems to be not working at all. Here's my css code. Do you you think that I missed something?
/*header navigation in homepage*/
.home header#main-header {
position: absolute;
top: auto !important;
bottom: 0px !important;
background: rgba(0, 0, 0, 0.7);
transition: all 3s ease-in-out;
}
.home header#main-header.et-fixed-header {
position: fixed !important;
top: 0px !important;
bottom: auto !important;
transition: all 3s ease-in-out;
}
/*end of header navigation in homepage*/
/*full width slider in homepage*/
.fs{
position:absolute;
top:0; right:0; bottom:0; left:0;
z-index: 10;
background-position:bottom;
background-size: inherit;
}
.home #page-container{margin-top:100vh !important;}
/*end of full width slider in homepage*/
Oh, here's a link for the website --> http://concept1.mystudioengine.site/
What I'm trying to do is header nav bar supposed to have an animation on scroll. Please help. Any advice will be much appreciated.
First, is not a good idea use all in this case, add a transition for each specific property that you want to animate.
So, there are some properties and values that you can't animate, like top: auto to top: 0px.
But animate properties like top, is not recommended for performance questions, I suggest you to read this post about achieving 60 FPS animations, and about Critical Rendering Path.
In this case, the best option is to use something like this to animate your header for a fixed position:
/*header navigation in homepage*/
.home header#main-header {
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
transform: translateY(-100%);
transition: transform 3s ease-in-out;
}
.home header#main-header.et-fixed-header {
position: fixed;
transform: translateY(0);
}
/*end of header navigation in homepage*/
Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered?
The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity.
One method is to change the opacity: 0.4 but I only want the background to change.
It's a long time ago but you can do something like this:
.element {
background-color: red;
}
.element:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
You can change the 100px into a number you want. I took a large one to cover the whole element.
It isn't a very beautiful solution but it works!
Here an example: http://jsfiddle.net/6nkh3u7k/5/
Here's an easy way to do it:
.myElement:hover {
filter: brightness(150%);
}
I'm using box-shadow property to control the brightness of the background color, by placing a translucent overlay
Example:
.btn {
background-color: #0077dd;
display: inline-flex;
align-content: center;
padding: 1em 2em;
border-radius: 5px;
color: white;
font-size: 18px;
margin: 0.5em;
cursor: pointer;
}
.btn.brighten:hover {
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}
.btn.darken:hover {
box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
you should use the RGBa method (background-color:rgba(R,G,B,alpha);) to do this:
.element{
background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
}
.element:hover{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
FIDDLE
AND if you strongly need to make it work in IE8 or lower too here is how it comes:
.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
}
note that the startColorstr and endColorstr values are built like this #AARRGGBB (where AA is the Alpha channel) and must be the same if you don't want a gradient effect from a color to another.
I would use a :after pseudo-element instead of a conventional background. It's supported in IE8, where rgba() isn't.
HTML:
<div class="hoverme">
<p>Lorem ipsem gimme a dollar!</p>
</div>
CSS:
.hoverme {
position: relative;
}
.hoverme:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: -1;
}
.hoverme:hover:after {
background-color: #ddd;
}
or something like that.
http://caniuse.com/#search=%3Aafter
For a smoother result, add a CSS3 transition:
.hoverme:after {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
The previous snippet was copied and pasted from http://css3please.com
http://jsfiddle.net/ghodmode/6sE9E/
You can do this with only CSS using filter: brightness(); but it is only currently supported in WebKit browsers. See http://jsfiddle.net/jSyK7/
You want to change the background-color lightness of any element that is hovered without using opacity. Unfortunately. I don't think this is possible without setting specific background-color values for your hovers.
The use case is that I'm allowing a user to hover over any element on
a page. I don't want to go around determining each colors equivalent
at 80% opacity.
There is one alternative that I can think of but it would require a translucent PNG overlay on the entire element, which will also cover any of the element's contents. Thereby not solving your problem.
Related Question: Dynamically change color to lighter or darker by percentage CSS (Javascript)