The CSS effect in the codepen below showcases a hover feature where the image grows when hovered over and gradually decreases back to its original size when the mouse is moved away. However, I am looking to change this decrease so that it happens instantly rather than gradually. Can someone assist me with this modification?
HTML:
<div class="photo">
<img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" /></div>
<div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
</div>
CSS:
.photo-image {
cursor: pointer;
position:relative;
top:9px;
left:9px;
width:80px;
border:1px solid #999;
z-index:1000;
opacity:0.6;
transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}
.photo-image:hover{
width:200px;
top:-50px;
left:-50px;
z-index:1001;
opacity:1;
}
Codepen example: http://codepen.io/DouglasGlover/pen/zHBid/