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
Post a Comment