Untitled

<h1>Simple Image Gallery</h1>

<div class="gallery cf">

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1102654/landscape-test-1_1x.jpg" />

  </div>

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1104190/iceberg_1x.jpg" />

  </div>

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1104378/igloo-800_1x.jpg" />

  </div>

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1102718/trees_1x.jpg" />

  </div>

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1106680/space_1x.jpg" />

  </div>

  <div>

    <img src="http://dribbble.s3.amazonaws.com/users/68180/screenshots/1098992/render1_1x.jpg" />

  </div>

</div>

@import url('http://fonts.googleapis.com/css?family=Lato');

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font: 14px/1 Lato, sans-serif;

  color: #555;

  background: #eee;

}

.gallery {

  width: 790px;

  margin: 0 auto;

  padding: 5px;

  background: #333;

}

.gallery > div {

  position: relative;

  float: left;

  padding: 5px;

}

.gallery > div > img {

  width: 250px;

  transition: .1s transform;

  transform: translateZ(0); /* hack */

}

.gallery > div:hover {

  z-index: 1;

}

.gallery > div:hover > img {

  transform: scale(1.5,1.5);

  transition: .3s transform;

}

.cf:before, .cf:after {

    display: table;

    content: "";

    line-height: 0;

}

.cf:after {

    clear: both;

}

h1 {

  margin: 40px 0;

  font-size: 24px;

  text-align: center;

  text-transform: uppercase;

}