My code includes a CSS3 transition that adjusts the size and position of an image within a div when hovered over.
While this effect works well, I am concerned about older browsers such as IE9- that do not support CSS3 transitions. Is there a way to modify the CSS code to provide a fallback for these browsers?
The ideal scenario would be to display the image in a way that fits the div without any zooming (see example here) and without any hover animation.
I am looking for a solution that is purely CSS-based and does not require changes to the HTML markup.
Here is the full code example:
HTML :
<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />
CSS :
div{
overflow:hidden;
width:500px;
height:250px;
position:relative;
}
img{
display:block;
position:absolute;
height:auto;
width:200%;
left:-30%;
top:-60%;
-webkit-transition-property: width, left, top;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-out;
transition-property: width, left, top;
transition-duration: .8s;
transition-timing-function: ease-out;
}
div:hover img{
width:100%;
top:0;
left:0;
}