This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 2 years ago.
I have a checkbox and an image on an HTML page:
I want the image to disappear when the checkbox is checked, and return back when it's unchecked. It can be easily done with the opacity property but this will only hide the image – and I need it to disappear (so that other elements can take the image's place for example).
I tried to combine opacity with display properties:
img {
display: block;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
display: none;
opacity: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
but it wouldn't work (no transition).
How can I solve this problem?
display property cannot be transitioned nor animated. It works fine without it.
img {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
opacity: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
You check another question for more information.
In case you need that space you can animate for example height or max-height.
img {
opacity: 1;
max-height: 150px;
transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#checkbox:checked ~ div img {
opacity: 0;
max-height: 0;
}
<body>
<input type="checkbox" id="checkbox">
<div>
<img src="https://via.placeholder.com/150" alt="">
</div>
</body>
Related
I'm trying to figure out, how to have two divs that would react to onmouseover event. One should overlay with picture the other, whereas the bottom div should contain another image and other elements such as buttons, text etc. Could you please show me, how I need to adjust my code, to make it work?
HTML:
<div id="container">
<div id="bottom" >
<img id="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p id="text">
Hello World!
</p>
</div>
<div id="top">
<img id="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
</div>
CSS:
#container img {
position:absolute;
height:400px;
width:400px;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#top img:hover {
opacity:0;
}
#text{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
This is what I've got so far. But I'd need to display the Hello world only when bottom image is displayed.. As well if I'd have some button there, to make it react only in those situations.
http://jsfiddle.net/L7XCD/733/
The easiest way if you just want clickable elements on the bottom element, would be to just switch the top and bottom layer. So you make your top layer (including button and text) transparent and lay it over the visible image.
On hover you just blend it in.
If you do it the other way around the top image is blocking the clickevents.
I put a little example together here:
http://jsfiddle.net/L7XCD/732/
HTML:
<div class="container">
<div class="cat-image bottom">
<img class="cat" src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</div>
<div class="cat-image top" >
<img class="image" src="http://curiousanimals.net/wp-content/uploads/2008/04/cat-programmer.jpg"/>
<p class="text">
Hello World!
</p>
<button>Click meow!</button>
</div>
CSS:
.top {
position: relative;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.top:hover {
opacity: 1;
}
.bottom {
position: absolute;
top: 0;
}
#top {
z-index: 10;
position: relative;
}
#bottom #text {
z-index: 1;
}
That should do the trick.
I have 2 images on top of each other, positioned absolute, in my example they are square but in my real project they are pngs with some transparency in the borders so the one in the back needs to be hidden until it appears on hover.
My problem is I need the transition to have some kind of delay so that the back pic appears a bit before the one on top so you don't see the background in between. I have made a fiddle to illustrate this:
http://jsfiddle.net/L21sk0oh/
You can clearly see the red from the background, that shouldn't happen. Also there is some weird moving going on, I haven't noticed this in my actual project.
Also my HTML:
<div class="product1">
<img class="active" src="http://lorempixel.com/400/200/sports" alt="">
<img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>
And my css:
body{
background: red;
}
.product1{
position: relative;
width: 400px;
height: 200px;
}
img{
position: absolute;
top:0;
left:0;
}
.product1 img.active{
transition: all 1s ease-in-out;
opacity: 1;
}
.product1 img.inactive{
transition: all 1s ease-in-out;
opacity: 0;
}
.product1:hover img.active{
opacity: 0;
}
.product1:hover img.inactive{
opacity: 1;
}
You could specify a value for the transition-delay property.
In this case, I added a 1s delay to the transition shorthand of .product1 img.active:
Updated Example
.product1 img.active {
transition: all 1s 1s ease-in-out;
opacity: 1;
}
The above is equivalent to:
.product1 img.active{
transition: all 1s ease-in-out;
transition-delay: 1s;
opacity: 1;
}
Make sure you're adding the transition shorthand properties in the correct order.
I have a page with an element that has an animation on hide/show. The page loads when the element is not shown but still, when the page loads it shows the hide animation.
I've even tried to change the condition to ng-show="false" and still I see the hide animation when page loads.I've understood that there was an old problem with angularjs about this but I'm using 1.2.2.
HTML:
<div class="c_redDiv" ng-show="state == true">
<div ...>
<button ...>
<div ... />
</button>
<button ...>
<div ... />
</button>
</div>
</div>
CSS:
.c_redDiv.ng-hide-add, .c_redDiv.ng-hide-remove {
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
display: block !important;
}
.c_redDiv.ng-hide-add.ng-hide-add-active,
.c_redDiv.ng-hide-remove {
opacity: 1;
top: -50px;
}
.c_redDiv.ng-hide-add,
.c_redDiv.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
top: 0px
}
you should add to your css:
.c_redDiv{
display:none;
}
.c_redDiv.ng-show{
display:block;
}
I was unable to find a way to avoid the initial animation triggering when ng-hide or ng-show is used, but was able to get it working with ng-if.
HTML:
<div class="c_redDiv" ng-if="state == true">
...
</div>
SASS:
.c_redDiv {
overflow: hidden;
transition: max-height 0.35s ease;
&.ng-leave, &.ng-enter.ng-enter-active {
max-height: 300px;
}
&.ng-leave.ng-leave-active, &.ng-enter {
max-height: 0;
}
}
I have these social media icons, when the mouse hovers on one icon its should fade into a other icon. I thought of something like this:
HTML:
<div class="socials">
<img src="../images/fb.png" id="fb1" />
<img src="../images/fb-hover.png" id="fb2" />
<img src="../images/twitter.png" id="twitter1" />
<img src="../images/twitter-hover.png" id="twitter2" />
<img src="../images/insta.png" id="insta1"/>
<img src="../images/insta-hover.png" id="insta2" />
</div>
CSS:
/*This is for letting them stack on each other*/
#fb2, #twitter2, #insta2 {
display:none;
position:absolute;
}
/*Fade animation*/
#fb1:hover, #twitter1:hover, #insta1:hover {
opacity: 0.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
Or check this jsfiddle.
The fading out works correctly. But the 'background' image (so the '...-hover.png' image) won't show up. How do I make this work?
Thanks!
If you set display to block on your #fb2, #twitter2, and #insta2, you can see the problem - it's the positioning. In your solution you would need to absolutely position each hover icon under the normal icon. I don't think it can be flexible.
So, I propose a more flexible solution.
Introduce this syntax:
<div class="socials">
<div class="icon">
<img src="http://sillyquark.com/images/fb.png" class="normal" />
<img src="http://sillyquark.com/images/fb-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/twitter.png" class="normal" />
<img src="http://www.sillyquark.com/images/twitter-hover.png" class="hover" />
</div>
<div class="icon">
<img src="http://www.sillyquark.com/images/insta.png" class="normal" />
<img src="http://www.sillyquark.com/images/insta-hover.png" class="hover" />
</div>
</div>
Put each icon in a div with a class of of .icon and inside put two images.
Set the .icon div's position to relative to allow absolute positioning relative to the .icon, instead of the body element. Set each icon's top and left to 0px, and add transitions to all images. Also, add width to .icon and img.
.icon{
float: left;
position: relative;
width: 45px;
height: 45px;
padding: 20px;
}
.icon img{
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
opacity: 1.0;
position: absolute;
width: 45px;
top: 0;
left: 0;
}
This is how you switch opacities. In normal conditions, set .icon .normal's opacity to 1.0, and .icon .hover's opacity to 0.0. On hover, do the oposite.
.icon .hover { opacity: 0.0; }
.icon:hover .hover { opacity: 1.0; }
.icon:hover .normal { opacity: 0.0; }
Check out this fiddle for the demo http://jsfiddle.net/uUk6N/3/
How would I go about hovering over an image that then blurs the background image behind it within css? The way I have it set up now is the background image blurs upon hover.
Here's my css:
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
.wrapper{
width:900x;
height: 100px;
position: absolute;
top: 2400px;
z-index: 50;
}
.logo{
postion: absolute;
margin: 0 auto;
top: 2420px;
z-index: 50;
left: 400px;
}
html:
<div class="blur"><img src="/homepic1.jpg"></div>//This is the image I want blurred
<div class="wrapper">
<div class="row">
<div class="span12 pagination-centered">
<img src="/transparanetsnu.png">//How do I hover over any of these images to trigger a blur on "homepic1.jpg"
</div>
<div class="span4 offset3">
<div class="box2"><img src="/greek_logo.gif"></div>
</div>
<div class="logo"><img src="/UM-Main-Logo-Maroon.gif">
</div>
I think the best way is to use JQuery. All images and add a class like 'blur' to them everytime user hover over one image, but you should remove the class from the one you don't want.
$('.img1').mouseover(function(){
$('img').addClass('blur');
$('.img1').removeClass('blur');
});
Add the effect using css or javascript.
Use jQuery for that purpose.
First of all dowload jQuery from: http://code.jquery.com/jquery-1.10.2.min.js
Then.
$('.yourImage').mouseover(function(){ //'.yourImage' are the last three images in your case.
$('.homepic1').addClass('blur'); //'.homepic1' is the class of first image in your case
});
.addClass('blur') , Will add the class 'blur' from your CSS to that '.homepic1' element, As soon as your mouse hovers over ANY of the three images.