I want to have a transition when I change background on click. The original background is a gradient while the second background is a shade of blue applied to the first background. Like so:
From:
To:
I can't find a way to apply a simple 0.3s transition for this change.
My styles:
body {
background: linear-gradient(25deg, #b24592, #f15f79) no-repeat;
}
.layer {
background: rgba(9, 21, 110, 0.37);
mix-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
My .html:
<body>
<div class="layer" [hidden]="shopIsOpen">
</div>
...
</body>
What can I do to implement a simple transition between these two backgrounds on a click event?
Thanks in advance.
You can not transition gradients. Try transitioning the opacity or height of .layer instead
Unfortunately, transition doesn't work with linear-gradient, instead you have to work with opacity or with moving background-position on hover.
.magic {
background: linear-gradient(25deg, #b24592, #f15f79);
height: 200px;
width: 200px;
}
.magic::after {
background: linear-gradient(25deg, #f15f79, #b24592);
content: '';
display: block;
height: 100%;
opacity: 0;
transition: opacity .3s ease;
width: 100%;
}
.magic:hover::after {
opacity: 1;
}
<div class="magic"></div>
If you are not changing the colors or position of colors in linear-gradient you can just add a opacity property to the overlay element ".layer" and add hover event to it
And if you are trying to change the color or their position you can add an animation of gradient with tools like gradient-animator (which does it by changing the background postion as you can't add transition or animation to css gradient) and append it to the body directly with js
Related
How can I realize a smooth transition for my mobile menu?
The transform property is working, but I want it to happen slowly..
My Sass looks like this
.mobile-nav
display: none
position: relative
width: 100%
background: $white
padding: 30px 0 20px
transform: translateY(-100%)
#media (max-width: 775px)
.mobile-nav.is-o
display: block
transform: translateY(0%)
The main obstacle you're facing is that the display property is not animatable.
Like a light switch, display: none is off and display: block is on. There's no middle ground, no fade effects, no CSS transitions.
However, there are multiple other properties you can use for transitions. Among them:
height
opacity
z-index
background-color
Here's an example:
.mobile-nav-toggle {
font-size: 2em;
cursor: pointer;
}
.mobile-nav {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
opacity: 0;
transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
width: 150px;
height: 150px;
opacity: 1;
background-color: lightgreen;
transition: 1s;
}
<div class="mobile-nav-toggle">☰</div>
<div class="mobile-nav">
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
References:
Full list of animatable properties in CSS
Transitions on the display: property
I personally use opacity combined with visibility to achieve fade effect like I would like for whole element. Remember to manipulate z-index, so you "hidden" object won't be clickable when dissapeared.
I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.
Here is a webpage that has the css slider:
http://melodywai.com/sodium.html
And here is a snippet of the CSS stylesheet that relates to the arrows:
.carousel-wrapper { position: relative; }
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
height: 500px;
width: 750px;
margin-left: auto;
margin-right: auto;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.
Thanks!
try adding
.carousel-wrapper .carousel-item .arrow:hover{
//do something
}
you can target them this way.
a.arrow.arrow-prev:hover {
}
a.arrow.arrow-next:hover {
}
to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:
a.arrow.arrow-prev:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-prev.png"); // to change the arrow img
}
a.arrow.arrow-next:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-next.png"); // to change the arrow img
}
this is a simple solution and it will look good with the transition effect.
Tell me if this helps you or you need more suggestions
I have an image taking up the whole viewport. Over top of it is a div, also taking up the whole viewport. The div has background: rgba(0,0,0,.5); to make the image behind it look darker. It works great, except that when the page is loading, the whole screen is covered with gray before opacity is applied and I can see the image underneath.
Is there any way to make the image and the div (with opacity applied) appear at the same time? I don't want to see the big block of gray while the page is loading.
This should do it for you https://jsfiddle.net/c259LrpL/26/
This will wait till images are loaded then make the img and the div visible at the same time... I think
<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/" style="visibility: hidden" >
<div id="over" style="visibility: hidden" >
</div>
<script>
$(window).on("load", function() {
$("#img1").css("visibility", "visible");
$("#over").css("visibility", "visible");
});
</script>
Consider this idea. We'll use the :after pseudoclass of the <img> container's background property (the <figure> in my example) to control the darkening. When the page is fully loaded, we add a .loaded class to the body. This does 2 things simultaneously:
Transition the opacity from 0 to 1 on the <figure>
Transition the semi-opaque background from (0, 0, 0, 0.5) to transparent
window.onload = init;
function init() {
document.body.classList.add("loaded");
}
body,
figure{
margin: 0;
}
figure {
position: fixed;
width: 100vw;
height: 100vh;
opacity: 0;
transition: 2s opacity;
}
img {
width: 100vw;
}
figure:after {
transition: 2s background;
background: transparent;
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.loaded figure:after {
background: rgba(0, 0, 0, 0.5);
}
.loaded figure {
opacity: 1;
}
<figure>
<img src="https://images.unsplash.com/photo-1432637194732-34cedd856522?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a135be75b0fa480c18b22b5e557f56b3" alt="">
</figure>
http://codepen.io/antibland/pen/EKrVKr
Well, you can wait until the browser is done loading all images and then slowly change the opacity, like a fade-in effect. Here's a preview:
var imageElement = document.getElementById('image');
var overlayElement = document.getElementById('overlay');
window.addEventListener("load", function() {
imageElement.style.opacity = "1";
overlayElement.style.opacity = "1";
}, false);
body {
position: relative;
}
#image,
#overlay {
width: 1000px;
height: 800px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
}
#overlay {
background: rgba(0, 0, 0, 0.5);
}
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg">
<div id="overlay"></div>
It's plain javascript. I know the tag only said css, but what you want is not possible with css only. I quickly created an overlay effect, don't mind the css except for: opacity: 0; and transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out for the fade-in effect.
The javascript works like this: I create 2 variables which get the elements from the DOM. The image has an ID image and the overlay has an ID overlay. Next we set an eventlistener to our window. When the window is completely loaded, it should execute everything in the function. The opacities of both the image and overlay are set to 1 (visible). With our css property transition we manage the fade-in effect.
I am trying to animate/crossfade bg image using CSS3. I know that this works, but only in Chrome for now:
.image {
width: 100%;
height: 100%;
background-size: cover;
transition: background-image .5s ease-in;
background-image: url(../image.jpg);
}
.image:hover {
background-image:url(../image1.jpg;
}
In Chrome this works nicely, with seamless transition from one image to another. I know that I can animate background-position property using CSS3 keyframes and sprite image, but the problem is that I must use cover property. If I know exact dimensions of my holder div, then changing background position with keyframes works like a charm, but when adding background-size:cover in the mix, well, the only thing I can say that the results are not as expected.
Are there any workaround for this?
You can set the second image on a pseudo element, and just change the opacity of that to make the hover effect
.test {
position: relative;
width: 450px;
height: 300px;
background-image: url(http://placekitten.com/300/200);
background-size: cover;
}
.test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(http://placekitten.com/600/400);
background-size: cover;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
opacity: 0;
}
.test:hover:after {
opacity: 1;
}
fiddle
By the way, this works cross-browser also
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition