CODEWITHSUNDEEP
css
hudiny6
hudiny6

Reputation: 23

CSS3 hover transition effect scale

I seem to have a problem with the transition on hover. When it reaches the end of the transition it jumps back to the normal scale. Dont know where is the problem.Any IDEA what should I do with it?

#image1 {
position: relative;
height: 150px;
width: 350px;
top: 100px;
left: 3%;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
transition: All 0.900s linear;
-webkit-transition: All 0.900s linear;
-moz-transition: All 0.900s linear;
-o-transition: All 0.900s linear;
transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-webkit-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-moz-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-o-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
-ms-transform: rotate(0deg)  scale(1)  skew(0deg)  translate(0px);
}
#image1:hover {
position: relative;
height: 150px;
width: 350px;
top: 100px;
left: 3%;
background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-webkit-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-moz-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-o-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
-ms-transform: rotate(0deg)  scale(1.234)  skew(0deg)  translateX(150px)  translateY(50px);
}
<img src="http://placehold.it/350x150" id="image1">

Upvotes: 1

Views: 718

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1444

The hover event moves the very element on which the same hover event is listened. So once the transition has ended, your element isn't hovered anymore as soon as you move your cursor just a tiny bit.

You should try wrapping your image inside an immobile container and listen to the hover on this container.

EDIT: added this snippet:

#image1 {
  position: relative;
  height: 150px;
  width: 350px;
  top: 100px;
  left: 3%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transition: All 0.900s linear;
  -webkit-transition: All 0.900s linear;
  -moz-transition: All 0.900s linear;
  -o-transition: All 0.900s linear;
  transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
#container:hover #image1 {
  position: relative;
  height: 150px;
  width: 350px;
  top: 100px;
  left: 3%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -webkit-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -moz-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -o-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
  -ms-transform: rotate(0deg) scale(1.234) skew(0deg) translateX(150px) translateY(50px);
}
<div id="container">
  <img src="http://placehold.it/350x150" id="image1">
</div>

Upvotes: 2

Related Questions