CSS3 Scale Transition + Transform

Alles was es braucht

Leitbild

This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some...

mehr darüber »

Vorteile:

Wer es nicht kann, macht halt nix

Nachteile:

Der äußerste Bild-Container muss immer eine feste Höhe haben!

HTML

<div class="item">
  <img src="bild-rot.jpg">
</div>

CSS

/* Äusserster Container */
.item {
  width:32%; height:300px; float:left; margin:0 2% 2% 0;
  position:relative; z-index: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  }

.item img {
  position:absolute; top:0; right:0; bottom:0; left:0; z-index: 0;
   -webkit-transition: -webkit-transform 0.5s ease-in-out;
     -moz-transition: transform 0.5s ease-in-out;
      -ms-transition: transform 0.5s ease-in-out;
       -o-transition: transform 0.5s ease-in-out;
          transition: transform 0.5s ease-in-out;
}

.item:hover img {
  cursor:pointer;
  -webkit-transform: scale(1.1,1.1);
      -ms-transform: scale(1.1,1.1);
          transform: scale(1.1,1.1);
   -webkit-transition: -webkit-transform 1s ease-in-out;
     -moz-transition: transform 0.5s ease-in-out;
      -ms-transition: transform 0.5s ease-in-out;
       -o-transition: transform 0.5s ease-in-out;
          transition: transform 0.5s ease-in-out;
}