CODEWITHSUNDEEP
htmlcss
Muhammad Umer
Muhammad Umer

Reputation: 18097

css transition: choose different speed for hover out

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;
}

Upvotes: 13

Views: 26962

Answers (3)

Aru
Aru

Reputation: 1870

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;
}

Upvotes: -1

AJFarkas
AJFarkas

Reputation: 3149

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.

Upvotes: 29

tomc
tomc

Reputation: 427

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.

Upvotes: 0

Related Questions