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