Zoomable thumbnail

by Cătălin Dogaru

HTML

<div class="col">
  <div class="thumb">
    <img class="image" src="http://placehold.it/800x600">
    <img class="icon" src="http://placehold.it/80x80/333/ccc">
  </div>
</div>

CSS

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.col {
  width: 480px;
}

.thumb {
  overflow: hidden;
  position: relative;
}

.thumb > .image {
  transition: all ease .2s;
}

.thumb:hover > .image {
  opacity: .8;
  transform: scale(1.2);
}

.thumb > .icon {
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  position: absolute;
  top: 50%;
}