transform: scale(n); - different on mousein than on mouseout

Question

I am using transform: scale(); on a website. I hope somebody can help me with a question I could not resolve by searching in the web.

Here is my code: HTML:

<div class="hopp_circle_img">
   <img src="..." alt="" />
</div>

CSS:

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}   

That works fine, but I was asked to make the effect different when the courser moves in, than when it moves out. E.g. to scale fast on mouse-in, but slow on mouse-out. Is there any solution for that either in CSS3 or in Javascript?

Thank you rabox


Show source
| javascript   | css   | css3   | transform   2016-12-13 15:12 2 Answers

Answers to transform: scale(n); - different on mousein than on mouseout ( 2 )

  1. 2016-12-13 15:12

    Set a the slow transition to the element (.hopp_circle_img img), and the fast transition to the element while it's hovered (.hopp_circle_img img:hover). So when you leave the element, the slower transition will be in effect.

    I've set the transition shorthand property with different duration and easing, but you can just change transition-duration or set transition-delay or a different transition-timing-function (easing).

    .hopp_circle_img {
      position: relative;
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      overflow: hidden;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      z-index: 0;
    }
    .hopp_circle_img img {
      -webkit-transition: transform 0.5s ease-out;
      transition: transform 0.5s ease-out;
    }
    .hopp_circle_img img:hover {
      display: block;
      z-index: 100;
      -webkit-transform: scale(1.25);
      transform: scale(1.25);
      -webkit-transition: transform 0.15s;
      transition: transform 0.15s;
    }
    <div class="hopp_circle_img">
      <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" />
    </div>

  2. 2016-12-13 15:12

    Sorry, directly after posting I resolved the topic on my own. There has to be a different transition-time on :hover. e.g.

    .hopp_circle_img img {
      -webkit-transition: transform 0.15s;
      transition: transform 0.15s;
    }
    .hopp_circle_img img:hover {
      display: block; 
      z-index: 100;
      -webkit-transform: scale(1.25);
      transform: scale(1.25);
      -webkit-transition: transform 2s;
      transition: transform 2s;
    

    }

    }   
    

Leave a reply to - transform: scale(n); - different on mousein than on mouseout

◀ Go back