CODEWITHSUNDEEP
cssformattingcss-transitionscss-animations
machiulis
machiulis

Reputation: 13

CSS Transform & transition

I have an image and I need its on hover opacity to be 0.5, then It must scale up to 200% and back the opacity up to 1 when image is full scaled size.

Example

enter image description here

I am able to make a scaling transform and opacity on hover, but I need the opacity to be 1 after the scale when image is at 200% size.

#imagecontainer {
  border: 2px solid red;
  width: 251px;
  height: 251px;
  opacity: 1;
  position: absolute;
}
#image {
  width: 250px;
  height: 250px;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  -webkit-transition: -webkit-transform 1s ease-in-out;
}
#image:hover {
  opacity: 0.8;
  -webkit-transform: scale(2, 2);
}

Upvotes: 1

Views: 71

Answers (1)

Harry
Harry

Reputation: 89760

Since there are more than one state change (that is, opacity: 0.5 initially before the transform is completed and then opacity: 1 after the transform is completed, you cannot do it with transition alone because the transition can only change the opacity value once and retain it. You either need to use CSS3 animations or alter the styling using JS with transitionend event.

Below is a sample snippet with CSS3 animations where on hover the image gets opacity: 0.5 and this state is retained till the 99% keyframe. All this happens while the image goes from not having any transform to transform: scale(2,2). Then at the 100% frame, the transform is retained as it is but opacity is changed from 0.5 to 1.

#imagecontainer {
  border: 2px solid red;
  width: 251px;
  height: 251px;
  opacity: 1;
  position: absolute;
}
#image {
  width: 250px;
  height: 250px;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
}
#image:hover {
  opacity: 0.5;
  animation: opacitynscale 1s ease-in-out forwards;
}
@keyframes opacitynscale {
  99% {
    transform: scale(2, 2);
    opacity: 0.5;
  }
  100% {
    transform: scale(2, 2);
    opacity: 1;
  }
<div id='imagecontainer'>
  <img id='image' src='http://lorempixel.com/250/250/nature/1' />
</div>

The downside of using CSS animation instead of transition for this is that unlike transition, the animation wouldn't automatically produce the reverse effect on hover out (that is, it would snap back to original state and not gradually go back). Another animation must be written for the reverse effect.

If you can't use CSS3 animation for whatever reasons (including the aforementioned) then you can do it with a bit of JavaScript by using the transitionend event.

var img = document.getElementById('image'),
  mousein = false;

img.addEventListener('transitionend', function() { /* this event is fired when transition is over */
  if (mousein)
    img.style.opacity = 1; /* changes element's opacity to 1 */
  else
    img.style.opacity = null; /* remove inline style on hover out, otherwise it will override others */
});

/* to determine if mouse is over image or not */
img.addEventListener('mouseover', function() {
  mousein = true;
});
img.addEventListener('mouseout', function() {
  mousein = false;
});
#imagecontainer {
  border: 2px solid red;
  width: 251px;
  height: 251px;
  opacity: 1;
  position: absolute;
}
#image {
  width: 250px;
  height: 250px;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  transition: transform 1s ease-in-out;
}
#image:hover {
  opacity: 0.5;
  transform: scale(2, 2);
}
<div id='imagecontainer'>
  <img id='image' src='http://lorempixel.com/250/250/nature/1' />
</div>

Upvotes: 1

Related Questions