css3 - CSS: transition on ease-out not working -


i image effects on main page fade out on mouse-out on mouseover.

i have changed all 1s ease; to: 1s ease-in-out; still not fading out on mouse-out jumps.

site: http://wolf-photoart.witconsult.de/

here example of current css:

#mainportraits img, #mainart img, #maincomics img { max-width: 56vw; } #mainportraits img:hover, #mainart img:hover, #maincomics img:hover{     -webkit-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8);      -moz-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8);      -o-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8);      -ms-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8);      filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8);    -webkit-transition: 1s ease-in-out;   -moz-transition: 1s ease-in-out;   -ms-transition: 1s ease-in-out;   -o-transition: 1s ease-in-out;   transition: 1s ease-in-out; }  #mainportraits:after{     content: 'portraits';     z-index: 9999;     -webkit-opacity: 0;     -moz-opacity: 0;     opacity: 0; }   #mainportraits:hover:after{   -webkit-opacity: 0.25;   -moz-opacity: 0.25;   opacity: 0.25;   -webkit-transition: 1s ease-in-out;   -moz-transition: 1s ease-in-out;   -ms-transition: 1s ease-in-out;   -o-transition: 1s ease-in-out;   transition: 1s ease-in-out;        } 

what doing wrong? thanks!

it because used transition property on hover selector. should instead put on image so:

#mainportraits img {     -webkit-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -ms-transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     transition: 1s ease-in-out; } 

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -