Scale of image with CSS3 animation

Question

I try to scale of image like light box. When run the size of image changed but with out animation.

<div id="dnn_ctr428_ContentPane" class="img-rectangular"><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
    <img alt="" src="/dnn_test/portals/0/Images/logo2.png?ver=1394-08-24-081741-293">
</div>

</div></div>

css:

.img-rectangular:hover img {

    width: 120%;
    height: 120%;
    -webkit-transition: width 2000ms ease-in-out;
    -moz-transition:    width 2000ms ease-in-out;
    -ms-transition:     width 2000ms ease-in-out;
    -o-transition:      width 2000ms ease-in-out;
    transition:         width 2000ms ease-in-out;
}

Solution 1

If you want to scale the image while hovering on the container and it must be via an animation then you could use an animation with transform: scale() like in the below snippet.

Advantage of using scale() transforms as opposed to width and height change is that it doesn't really require a set initial height and width.

/*.img-rectangular img {
  width: 200px;
  height: 200px;
}*/
.img-rectangular:hover img {
  transform-origin: left top;
  animation: scale 2000ms ease-in-out forwards;
}
@keyframes scale {
  to {
    transform: scale(1.2);
  }
}

<div id="dnn_ctr428_ContentPane" class="img-rectangular">
  <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
      <img alt="" src="http://lorempixel.com/400/400/nature/1">
    </div>

  </div>
</div>

---

However, animation is not really required for this one and it can be done with just transition also. The advantage of using transition as opposed to an animation would be that transitions by default produce the reverse (downscale) effect on hover out while animation would require a different keyframe setting to achieve it.

.img-rectangular img{
  /*width: 200px;
  height: 200px;*/
  transition: transform 2000ms ease-in-out;
  transform-origin: left top;
}
.img-rectangular:hover img {
  transform: scale(1.2);
}

<div id="dnn_ctr428_ContentPane" class="img-rectangular">
  <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
      <img alt="" src="http://lorempixel.com/400/400/nature/1">
    </div>

  </div>
</div>

Solution 2

When using transitions, you must set an initial value and an additional value which you want to transition to.

So it seems that the problem is that you have not set an initial value for the image width.

Try something like this:

img {
    width: 100%; /* initial value for width */
    transition: width 2s ease-in-out;
}

.img-rectangular:hover img {
    width: 120%; /* on hover transition to this value */ 
    height: 120%;    
}

FIDDLE

img {
  width: 100%;
  transition: width 2s ease-in-out;
}
.img-rectangular:hover img {
  width: 120%;
  height: 120%;
}

<div id="dnn_ctr428_ContentPane" class="img-rectangular">
  <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
      <img alt="" src="http://placehold.it/350x150">
    </div>

  </div>
</div>

Comments

[Harry]

Yup that's correct. Height and width transitions need an initial value (whereas scale like in my answer doesn't because the default scale is 1). Anyway, plus one for making that point which I missed in my answer :)

[G.L.P]

Thanks for the solution :)