<header class="header">
  <h1 class="header__title">Image Zoom on Hover</h1>
  <a href="https://codepen.io/dwinnbrown/pen/kXEEAa" target="_blank">Forked from the pen by @dwinnbrown</a>
</header>

<section class="wrapper">
	<a href="#" class="tile">
		<img src="https://media.timeout.com/images/101602611/image.jpg" alt="" class="tile__media">
		<span class="tile__content">Los Angeles</span>
	</a>
	
	<a href="#" class="tile">
		<img src="http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg" alt="" class="tile__media">
		<span class="tile__content">London</span>
	</a>
	
	<a href="#" class="tile">
		<img src="https://media.timeout.com/images/101484105/image.jpg" alt="" class="tile__media">
		<span class="tile__content">New York</span>
	</a>
	
	<a href="#" class="tile">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg" alt="" class="tile__media">
		<span class="tile__content">Hollywood</span>
	</a>
	
	<a href="#" class="tile">
		<img src="http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc" alt="" class="tile__media">
		<span class="tile__content">Dubai</span>
	</a>
	
	<a href="#" class="tile">
		<img src="http://blog.whitepages.com/wp-content/uploads/2015/04/san-franc.jpg" alt="" class="tile__media">
		<span class="tile__content">San Francisco</span>
	</a>
</section>
.tile {
	width: 100%;
	height: 300px;
	margin: 0.5rem auto;
	position: relative;
	display: block;
	overflow: hidden;
	float: left;
	
	&::after {
		content: "";
		position: absolute;
		display: block;
		background-color: rgba(52,73,94,0.75);
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0.5s, opacity 0.5s;
	} 
}

.tile:hover::after,
.tile:focus::after {
	visibility: visible;
	opacity: 1;
}

.tile__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s;
	transform: scale(1);
	backface-visibility: hidden;
}

.tile:hover .tile__media,
.tile:focus .tile__media {
	transform: scale(1.2);
}

.tile__content {
	top: 50%;
	right: 0;
	left: 0;
	position: absolute;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	color: #fff;
	font-size: 3rem;
	transition: visibility 0.5s, opacity 0.5s;
	transform: translateY(-50%);
	backface-visibility: hidden;
}

.tile:hover .tile__content,
.tile:focus .tile__content {
	visibility: visible;
	opacity: 1;
}

@media screen and (min-width: 64em) {
	.tile {
		width: calc(50% - 2rem);
		margin: 1rem;
	}
}


// The code below this point is used for styling the demo
@at-root {
  body {
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
  }

  .header {
    background-color: #232439;
    padding: 4rem 2rem;
    text-align: center;
    
    a {
      margin-top: 1rem;
      display: block;
      color: #6ddce5;
      font-size: 0.85rem;
      text-decoration: none;
    }
  }

  .header__title {
    margin: 0;
    color: #fff;
    font-weight: 300;
  }
	
	.wrapper {
		padding: 2rem;
	}
	
	.wrapper::after {
		content: "";
		display: table;
		clear: both;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.