CSS Transition not working on hover
11,369
It's because you can't transition from display: none
to display: table
.
Instead, you could transition the opacity
property by setting the initial display to table
along with opacity: 0
and then transitioning to opacity: 1
:
.overlay {
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
opacity: 1;
}
Author by
bakar
Updated on June 22, 2022Comments
-
bakar almost 2 years
I am having an issue. When I hover over the image, a dark overlay appears but CSS Transition property is not working on it.
Here is the html:
<div class="col-md-12"> <div class="collection-category"> <img src="http://dummyimage.com/600x400/#C1C1C1/fff" /> <a href="#"> <div class="overlay_wrap"> <div class="overlay"> <h2 class="collection_title">Headline One</h2> </div> </div> </a> </div> </div>
And CSS is:
.collection-category { display: block; overflow: hidden; margin: 10px 0; position: relative; } .collection-category img { width: 100%; max-height: 250px; } .collection_title { display: table-cell; vertical-align: middle; font-size: 28px; } .overlay_wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .overlay { display: none; background: rgba(2, 2, 2, 0.61); color: #FFF; text-align: center; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .collection-category:hover>a>.overlay_wrap>.overlay { display: table; height: 100%; width: 100%; }
Here is the JSFiddle
Any help would be highly appreciated.
thanks in advance.