CODEWITHSUNDEEP
csstransition
Martin Štefek
Martin Štefek

Reputation: 358

CSS transition mouse leave doesn't work properly

I am trying to scale and turn down opacity of image it really great work when I enter to the img with cursor but when I leave the img transition doen't work.

Here is my code:

#hoverCon:hover img {
  transform: scale(1.2);
  opacity: 0.5;
  transition: all .28s ease-out;
}

Upvotes: 1

Views: 1103

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you should write

#hoverCon img {
  transform  : scale(1);   /* optional */
  opacity    : 1;          /* optional */
  transition : all .28s ease-out;
}

#hoverCon:hover img {
  transform  : scale(1.2);
  opacity    : 0.5;
}

Define base properties (optionally) and transition on normal state, then only change properties on hover

Example: http://codepen.io/anon/pen/JogVVW

Upvotes: 3

Related Questions