How can I create a gallery showing Ken Burns effect, when mouse hovers over images? [closed]

First of all: please try to be a bit more specific. Many people may know what the Ken Burns effect is about – others might not know that it’s about panning and zooming a picture.

That said – you can achieve this effect through css only, using the transform property. Here is more about transform: scale at css-tricks.com and here is a working snippet at codepen.io scaling a background image on hover like this:

HTML:

<div class="image-box">
  <div class="image">
  </div>
</div>

CSS:

.image-box{
  width:300px;
  overflow:hidden;
}

.image {
  width:300px;
  height:200px;
  background: url("http://lorempixel.com/300/200");
  background-position:center;
  transition: all 1s ease;
}

.image:hover {
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
}

You could then also change the position of the background image as you like. This however you would have to apply to every image individually, if you want to zoom/pan to a different area of the image. Hope this helps to get started…

Related Posts: