CSS zoom in animation blocks on hover 2021 | Css Code Fun

CSS zoom in animation blocks on hover | Css Code Fun

Css code fun web design inspiration css tricks with CSS zoom in animation blocks on hover. CSS code snippets zoom in animation blocks on hover.

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

HTML Snippets zoom in animation blocks on hover | Css Code

<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 Snippet css code fun. | CSS Zoom in animation blocks

.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);
  }
}

Add a Comment

Your email address will not be published. Required fields are marked *