Top Laptops for Developers in 2026: The Ultimate Guide for Coders

Create Stunning Hover Animation Effects with HTML & CSS

In this tutorial, we'll show you how to create beautiful hover animation effects using simple HTML and CSS. It's easy to follow, and you can copy the code directly from this blog post. Let's add some interactive animations to your web projects!

Live Demo:

Image 1

Image 2

Image 3

Code to Copy:

<!-- HTML Code -->
<div class="container">
    <div class="box">
        <img src="https://via.placeholder.com/150" alt="Image 1">
        <p>Image 1</p>
    </div>
    <div class="box">
        <img src="https://via.placeholder.com/150" alt="Image 2">
        <p>Image 2</p>
    </div>
    <div class="box">
        <img src="https://via.placeholder.com/150" alt="Image 3">
        <p>Image 3</p>
    </div>
</div>
    

CSS Code:

/* CSS Code */
.box {
    width: 150px;
    padding: 20px;
    margin: 10px;
    text-align: center;
    border: 2px solid #ddd;
    transition: transform 0.3s, box-shadow 0.3s;
}

.box:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.box img {
    width: 100%;
    transition: transform 0.3s;
}

.box:hover img {
    transform: rotate(10deg);
}