CSS Only: Create Stunning Image Hover Effects in Minutes
In this video, we’ll guide you through creating stunning image hover effects using only CSS. Perfect for beginners and experts alike, this tutorial will help you take your web design skills to the next level.
Get ready to wow your website visitors with eye-catching hover animations that are simple to implement and customize.
We can use the following divs and img tags as HTML codes. I used picsum images like lorem ipsum texts as images.
<div class="container">
<div class="box"><img src="https://picsum.photos/id/11/150" /></div>
<div class="box"><img src="https://picsum.photos/id/10/150" /></div>
<div class="box"><img src="https://picsum.photos/id/100/150" /></div>
<div class="box"><img src="https://picsum.photos/id/50/150" /></div>
</div>
The CSS property that provides this effect is transform: scale. When we define this property to a hover, the defined image will grow by the scale value. The transition given to the previous div class also makes this movement appear as an animation.
.container {
width: 80%;
margin:0 auto;
padding: 80px 0;
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
width: 150px;
height: 150px;
background: gray;
margin: 0px 14px;
transition: 0.5s;
}
.box img {border-radius: 6px;}
.box:hover {
transform: scale(1.2);
background: black;
z-index: 2;
}
Popular Tutorials
I have been using VS Code for a while now and I…
The animated underline effect is a popular design trend that can add…
How to use animated SVG on your website? How about animating eye-catching…
In this VS Code tutorial, we are going to take a look…
In this video, we’ll guide you through creating stunning image hover effects…
Image carousels are a great way to display multiple images in a…