Design a Image Hover Effect Color Transition template using HTML and CSS

Last Updated : 17 Dec, 2023

The article uses HTML and CSS to create the template for an Image Hover Effect with Color Transition. This template adds an interactive element to your web design by smoothly transitioning colors when users hover over an image. You can create a dynamic effect that enhances visual engagement by utilizing HTML for structure and CSS for styling. Upon hovering over images, a seamless color transition effect is applied, enhancing user engagement.

Prerequisite:

HTML
CSS

Approach to Create Hover Effect Color Transition:

Create a basic card structure using HTML. Use <img> element to show the product image and <div> element to show the details.
On hovering over the container, a transformation (scaling) changes the background color, creating an image hover effect with a color transition.
The img styles set height and width, border radius, and opacity for the image. On hover, the opacity of the image increases.
The image is wrapped within the .container div, attribute src has the URL.

Example: The example shows the image hover Effect Color Transition template using HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>
        Design a Image Hover Effect Color Transition
        template using HTML and CSS
    </title>
 
    <style>
        body {
            background-color: rgb(172, 178, 178);
            justify-content: center;
            align-items: center;
            height: 100vh;
            display: flex;
        }
 
        .container {
            width: 400px;
            height: 200px;
            border-radius: 15px;
            box-shadow: rgba(41, 40, 40, 0.2);
            transition: transform 0.2s ease-in-out;
            background-color: black;
        }
 
        .container:hover {
            transform: scale(1.1);
            background-color: rgb(76, 155, 187);
        }
 
        img {
            width: 400px;
            height: 200px;
            border-radius: 10px;
            opacity: 0.8;
        }
 
        img:hover {
            opacity: 0.9;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230925163639/Role-of-Coding-in-Web-Design-Process-copy.webp">
    </div>
</body>
 
</html>