css transition: choose different speed for hover out - html

Question

Is it possible to choose a different timing/speed for transition in css so when mouse hover over a div it expands with different speed than the speed it retracts back to its original width not hover state.
I have tried declaring different transition speeds in :hoer and normal state styling, however, only normal state style seems to apply.
http://jsfiddle.net/tpf8mv51/3/
Problems:
1st) it goes with same speed it expanded with.
2nd) zindex takes effect after animation is completed for reasons i don't gte.
3rd) other images get affected even though they shouldn't, by affected i mean they 99% of time disappear till animation is done.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.main {
font-size: 0;
height: 100%;
width: 100%;
display: none;
z-index: -1;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.main img {
-webkit-user-select: none;
width: 25%;
-webkit-transition: transform .5s;
transform-origin: left;
z-index: 0;
vertical-align: top;
}
.main img:hover {
transform: scale(1.3, 1);
z-index: 1;
}

Answer 1

Don't fret. try this (quick IN, slow OUT):
.main img {
width: 25%;
height: 100%;
transition: width 2s ease;
}
.main img:hover {
width: 50%;
transition: width .5s ease;
}
Your Fiddle as I can see it only has one transition. If you're only changing the width, tell it to change the width, which has full browser support, rather than calling transform with all the attendant prefixes.

Answer 2

CSS doesn't distinguish between mouseover and mouseout, but this thread seems like it may have the answer to your question:
MouseOver and MouseOut In CSS
Edit: I just realized you said you have tried this. Javascript may be your only option.

Answer 3

Update your css with the below (add transition)
.main img {
-webkit-user-select: none;
width: 25%;
-webkit-transition: transform .5s;
transform-origin: left;
z-index: 0;
vertical-align: top;
transition:all 1s;
}
.main img:hover {
transform: scale(1.3, 1);
z-index: 1;
transition:all 1s;
}