Pure-CSS-Zoom-In-Blocks-On-Hover

Pure CSS Zoom In Blocks On Hover

This snippet designed by Emily Goldfein has a grid layout with a hover effect where the cards zoom in on hover.

If you are having trouble with the pen, try the archived copy on GitHub

Zoom In On Hover Snippet

 

HTML

<body><div class="background"><div class="content">
  <div class="block x1">Hover Over Me!</div>
  <div class="block x2">Or Over Me!</div>
  <div class="block x3">Try Hovering Here</div>
  <div class="block x4">Last But Not Least</div>
  <div class="block x5">Now Here!</div>
</div>
</div>
</body>

CSS

.background:before{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  display: block;
  background-size: 100% 100%;
  background-image: url('https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/53.jpg');
  width: 150%;
  height: 150%;
  top:-20px;
  left:-20px;
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px);
  background-repeat:no-repeat;
}

.content{
  height: 400px;
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: white;
-webkit-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
}

body{
  font-family: 'Roboto Condensed', sans-serif;
  text-align:center;
  vertical-align:middle;  
}

.x1{
  width:200px;
  height:150px;
  background-color:#9CB1FF;
  left: 0;
  top: 0;
  position: relative;
  line-height:150px;
}

.x2{
  position:absolute;
  height:250px;
  width:300px;
  left:400px;
  top:0px;
  background-color:#FFFFFF;
  line-height:250px;
  color:black;
}

.x3{
  position:absolute;
  height:250px;
  width:200px;
  left:0px;
  top:150px;
  background-color:#6694FC;
  line-height:250px;
}

.x4{
  position:absolute;
  height:150px;
  width:500px;
  left:200px;
  top:250px;
  background-color:#706AF3;
  line-height:150px;
}

.x5{
  position:absolute;
  height:250px;
  width:200px;
  left:200px;
  top:0px;
  background-color:#8593E6;
  line-height:250px;
}

.block{
  -webkit-animation:scaledown 1s linear;
  -moz-animation:scaledown 1s linear;
  animation:scaledown 1s linear;
  transform-origin:50% 50%;
  animation-fill-mode: forwards;
}

.block:hover{
   z-index:100;
  -webkit-animation:scale 1s linear;
  -moz-animation:scale 1s linear;
  animation:scale 1s linear;
  transform-origin:50% 50%;
  animation-fill-mode: forwards;
}



@keyframes scale{
  0%{
    transform:scale(1.0);
  }
  100%{
    transform:scale(1.1);
    -webkit-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
  }
}

@keyframes scaledown{
  0%{
    transform:scale(1.1);
  }
   100%{
    transform:scale(1.0);
  }
}