CSS Expanding Animation on Hover

Expanding CSS Animation on Hover

CSS animations have gained immense popularity in modern web development practice. For visually engaging and interactive web experiences, web developers are turning to CSS animations instead of complex languages like JavaScript. Today's browsers are very advanced and they support CSS3 features. So these browsers make it easy for developers to implement complex CSS3 animations in their projects. Today we will share with you a snippet of expanding image animation on hover which was made using CSS Flexbox and CSS Animation. The video tutorial below shows how to make this snippet. Subscribe to our channel if you find our content useful.

Video Tutorial:

Hope you have watched the video tutorial on 'CSS Expanding animation on hover'. A wide range of effects can be created with CSS, from subtle transitions to complex keyframe animations. Today's CSS Animation Snippet is a part of that. If you want to represent your image portfolio on your website, you can use this CSS snippet.

A container div is taken for this snippet. There are four boxes named 'box' inside the parent div. Inline CSS is used to assign a different background image to each div. The container elements are then styled using CSS Flexbox which you can see in the video tutorial above. Then using flex-grow and CSS transitions on hover state we got the desired animation.

You May Also Like:

CSS Expanding Animation on Hover [ Source Code ]:

To create this CSS Animation snippet, we have created an HTML File and a CSS File. You must do the same. Next, copy the code from the code box and paste it into your files. Check out the snippet in your favorite browser. If the code doesn't work, you can download the code from the download button below this article.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->  
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="style.css">
  <title>Expanding Animation using HTML CSS | CSS Flexbox</title>
</head> 
  <body>

    <div class="container">
      <div class="box" style="background-image: url(img/1.jpg);"></div>
      <div class="box" style="background-image: url(img/2.jpg);"></div>
      <div class="box" style="background-image: url(img/3.jpg);"></div>
      <div class="box" style="background-image: url(img/4.jpg);"></div>
    </div>
    
   
  </body>
</html>

ADD CSS:

body {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 100vh;
	transition: 0.5s;
	background: #142428;
}
.container {
	display: flex;
	max-width: 800px;
	width: calc(100% - 100px);
	height: 400px;
}
.container .box {
	position: relative;
	min-width: 60px;
	overflow: hidden;
	margin: 10px;
	background-size: auto 150%;
	background-position: center;
	cursor: pointer;
	transition: background-size 1s ease, flex-grow 1s ease;
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.container .box:hover {
	background-size: auto 100%;
	border-radius: 50px;
	transition: all 0.9s ease;
}

We hope the code snippet works for you. For more codes, explore our website by clicking the download button below our homepage. That's it for today. Let us know what you think of the snippet in the comment box below. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box