CSS悬停效果（鼠标悬停时长）

Question

I have the following CSS effect in below codepen. The hover works fine, on hover the image grows and when you mouse off it gradually decreases back to original size. I want to change the gradual decrease so that it is quicker, infact instant. So basically when I move mouse away, it immediately returns to original size.. can someone help?

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/

Answer 1

Simple! Just move the transition effect from .photo-image to . photo-image:hover :

.photo-image:hover {
 transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}