Image Hover Effects in CSS - Naukri Code 360

Q: How do you apply the hover effect in CSS?

In CSS, in the style tag or the ".css" file, add the ": hover" to the CSS selector when styling your component.

Q: How to disable hover in CSS?

Remove the ":hover" from the CSS selector from the style tag, and the animations will be removed that were there in the first place while you applied the hovering effect. Also, you can set the pointer-event properties of the specified element to none to achieve the same.

Q: What is the banner hover effect?

A banner hover effect applies animations like zoom, color overlay, or text pop-up on a website banner when the user hovers over it.

Q: How to create a zoom effect on image hover with CSS?

Use the transform: scale() property with the :hover selector to enlarge the image on hover. Apply transition for smooth animation.

Introduction

Image hover effects in CSS enhance user experience by adding interactive animations or transformations when the user hovers over an image. These effects make websites more dynamic, visually appealing, and engaging. With just a few lines of CSS, you can create stunning hover effects like zoom, blur, grayscale, or text overlays. In this blog, we'll explore different types of image hover effects in CSS with examples.

What are Image Hover Effects?

Image hover effects in CSS are significant effects that can make your images much more exciting and responsive whenever some user hovers over them. You can use any hovering effect that you want.

Interactivity plays an important role in a website. If your website is all-static, users’ interest in it goes down. Here image hover effects come into play. With these effects, you make your images much more interactive. They quickly load on your website and encourage users to spend more time on it. No matter how many hover effects you apply to your website, they don’t slow it down.

Examples

To add the hover effect, we add ":hover" to the CSS selector in the style tag or the CSS file for that specific component of the HTML file. You can add hover effects to the CSS selector that can be a class, ID, or an HTML attribute.

To understand the topic better, we will apply some image hover effects listed below.

Sliding Text on Image
Scaling an Image
Rotating and Swapping an Image
Fading Out an Image
Multilayering an Image

Please notice that in the following codes, the URL of the image(s) used in the "img" tag will vary depending on the path of the image in your systems.

1. Sliding Text on Image

In this effect, a sliding text will appear above the image with some content whenever we hover over an image.

In this, we mainly use the transition effect with a specified time. This will make the hover effect work smoothly.

Code

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            position: relative;
            overflow: hidden;
        }
        .container img{
            width: 100%;
            height: auto;
        }
        .container:hover .t{
            top: 0;
        }
        .t{
            color: white;
            background-color: rgba(0,0,0,0.8);
            position: absolute;
            top: -100%;
            height: 100%;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.4s;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="./photo-1619266465172-02a857c3556d.jpg" alt="">
        <div class="t">
            <h2>Volcano</h2>
            <p>This is a picture of Volcano. Beware, they are hot!</p>
        </div>
    </div>
</body>
</html>

Output

2. Scaling an Image

In this effect, hovering over an image will enlarge it and bend its border.

In this, we mainly use the “transform: scale()” effect. It scales the image when we hover over it. Also, the border-radius effect bends the border of the image.

Code

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            margin: auto auto;
        }
        .container img{
            width: 100%;
            height: auto;
            align-items: center;
            transition: all 1s;
        }
        .container:hover img{
            transform: scale(1.2);
            border-radius: 500px;
        }
    </style>
</head>
<body>
    <br><br><br><br><br>
    <div class="container">
        <img src="./yoga-164923092416x9.jpg" alt="">
    </div>
</body>
</html>

Output

3. Rotating and Swapping an Image

In this effect, if we hover over the image, it will rotate, and a different image will appear, entering and exiting in the same rotating manner.

We mainly use the transform: rotateY() functionality in this. It rotates the image with respect to Y-axis by the degrees specified.

Code

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .box{
            width:273px;
            margin: 0 auto;
            position: relative;
        }
        .box .box-image{
            width: 100%;
            height: auto;
        }
        .box .box-image{
            transform: rotateY(0);
            transition: all 1s;
        }
        .box:hover .box-image{
            transform: rotateY(-90deg);
        }
        .box .box-image2{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            transform: rotateY(90deg);
            transition: all 1s;
        }
        .box:hover .box-image2{
            transform: rotateY(0);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-image">
            <img src="./main-qimg-9c81a54813716fccd8e3608ab2f51dcf-lq.jpg" alt="">
        </div>
        <div class="box-image2">
            <img src="./main-qimg-148ae81e6fe0500e130fb547026a9b26-lq.jpg" alt="">
        </div>
    </div>
</body>
</html>

Output

4. Fading Out an Image

In this effect, initially, the image is somewhat faded, and when we hover over it, it becomes more precise and colorful.

For this, we use the opacity functionality. It edits the image to the lack of transparency to the percentage specified.

Code

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        .container{
            height: auto;
            width: 400px;
            margin: auto;
        }
        .container img{
            width: 400px;
            height: auto;
            margin: auto;
            opacity: 50%;
        }
        .container:hover img{
            opacity: 100%;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <br><br><br><br>
    <div class="container">
        <img src="./photo-1597655601841-214a4cfe8b2c.jpg" alt="">
    </div>
</body>
</html>

Output

5. Multilayering an Image

In this, if we hover over an image, it piles up as many layers of the image, fading down from top to bottom. It also makes the cursor a pointer when we hover over it.

We use the "img: nth-child()" functionality to refer to the nth-copy(or child) of the image.

Also, we use the "transform: translate()" functionality. It moves the image from its current position to the X-axis and Y-axis parameters specified.

Code

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box{
            position: relative;
            width: 360px;
            height: 517px;
            margin-top: 125px;
            transform: rotate(-35deg) skew(25deg) scale(0.8);
            transition: 0.4s;
        }
        .box img{
            position: absolute;
            width: 100%;
            transition: 0.4s;
        }
        .box:hover img:nth-child(1){
            cursor: pointer;
            transform: translate(40px, -40px);
            opacity: 0.2;
        }
        .box:hover img:nth-child(2){
            cursor: pointer;
            transform: translate(80px, -80px);
            opacity: 0.5;
        }
        .box:hover img:nth-child(3){
            cursor: pointer;
            transform: translate(120px, -120px);
            opacity: 0.7;
        }
        .box:hover img:nth-child(4){
            cursor: pointer;
            transform: translate(160px, -160px);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./png-transparent-ace-of-heart-playing-cad-playing-card-ace-of-hearts-one-card-suit-heart-playing-cards-love-game-text.png" alt="">
        <img src="./png-transparent-ace-of-heart-playing-cad-playing-card-ace-of-hearts-one-card-suit-heart-playing-cards-love-game-text.png" alt="">
        <img src="./png-transparent-ace-of-heart-playing-cad-playing-card-ace-of-hearts-one-card-suit-heart-playing-cards-love-game-text.png" alt="">
        <img src="./png-transparent-ace-of-heart-playing-cad-playing-card-ace-of-hearts-one-card-suit-heart-playing-cards-love-game-text.png" alt="">
    </div>
</body>
</html>

Output

6. Color Overlay

Color Overlay effect applies a transparent color layer over the image when the user hovers, enhancing its appearance.

Code:

<div class="image-overlay">
  <img src="image.jpg" alt="Image">
</div>

.image-overlay {
  position: relative;
  display: inline-block;
}

.image-overlay img {
  width: 100%;
  transition: 0.5s ease;
}

.image-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Black overlay */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-overlay:hover::before {
  opacity: 1;
}

7. Opacity Change

Opacity Change reduces the image transparency on hover to give a faded effect.

Code:

<div class="image-opacity">
  <img src="image.jpg" alt="Image">
</div>

.image-opacity img {
  width: 100%;
  transition: 0.5s ease;
}

.image-opacity:hover img {
  opacity: 0.6;
}

8. Color Overlay with Text

This effect displays text with a background color overlay when hovered.

Code:

<div class="overlay-text">
  <img src="image.jpg" alt="Image">
  <div class="text">Hover Me</div>
</div>

.overlay-text {
  position: relative;
  display: inline-block;
}

.overlay-text img {
  width: 100%;
  display: block;
}

.overlay-text .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.overlay-text:hover .text {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

9. Border Addition

This effect adds a border around the image on hover.

Code:

<div class="image-border">
  <img src="image.jpg" alt="Image">
</div>

.image-border img {
  width: 100%;
  transition: border 0.5s ease;
}

.image-border:hover img {
  border: 5px solid #ff5733; /* Orange border */
}

10. Shadow Effect

The Shadow Effect creates a smooth shadow around the image when hovered.

Code:

<div class="image-shadow">
  <img src="image.jpg" alt="Image">
</div>

.image-shadow img {
  width: 100%;
  transition: box-shadow 0.5s ease;
}

.image-shadow:hover img {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}

11. Flip Effect

The Flip Effect rotates the image on hover, creating a flipping card-like effect.

Code:

<div class="image-flip">
  <img src="image.jpg" alt="Image">
</div>

.image-flip img {
  width: 100%;
  transition: transform 0.5s ease;
}

.image-flip:hover img {
  transform: rotateY(180deg);
}

12. Brightness Adjustment

This effect increases or decreases image brightness on hover.

Code:

<div class="image-brightness">
  <img src="image.jpg" alt="Image">
</div>

.image-brightness img {
  width: 100%;
  transition: filter 0.5s ease;
}

.image-brightness:hover img {
  filter: brightness(150%);
}

13. Slide Effect

The Slide Effect moves the image slightly on hover.

Code:

<div class="image-slide">
  <img src="image.jpg" alt="Image">
</div>

.image-slide img {
  width: 100%;
  transition: transform 0.5s ease;
}

.image-slide:hover img {
  transform: translateX(20px);
}

14. Text Pop-Up

The Text Pop-Up displays text on hover with a smooth animation.

Code:

<div class="image-popup">
  <img src="image.jpg" alt="Image">
  <div class="popup-text">Hello World</div>
</div>

.image-popup {
  position: relative;
  display: inline-block;
}

.popup-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-popup:hover .popup-text {
  opacity: 1;
}

15. Grayscale to Color

This effect displays the image in grayscale by default and converts it to full color on hover.

Code:

<div class="image-grayscale">
  <img src="image.jpg" alt="Image">
</div>

.image-grayscale img {
  width: 100%;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.image-grayscale:hover img {
  filter: grayscale(0%);
}

Best Practices for Implementing Hover Effects

Implementing hover effects can enhance the user experience and improve the visual appeal of your website. However, it's essential to follow best practices to ensure the effects are smooth, accessible, and optimized.

Here are some best practices for implementing hover effects:

Use Subtle Animations
Keep hover effects simple and smooth to avoid distracting users. Subtle transitions enhance the design without overwhelming the content.
Add Transitions
Always use the transition property to create smooth effects.
Optimize Performance
Use CSS properties like transform and opacity instead of width or height for better performance because they leverage GPU rendering.
Make Effects Accessible
Ensure hover effects are keyboard-friendly and not the only way to access content. Use :focus alongside :hover for better accessibility.
Test on Different Devices
Hover effects work on desktop devices but may not work on touchscreen devices like mobile phones. Provide an alternative interaction like click events for mobile users.
Maintain Consistency
Use consistent hover effects across your website to provide a seamless user experience.
Limit Hover Effects on Important Elements
Avoid using hover effects on critical elements like buttons or links if they might confuse users.
Use Color Contrast
Make sure the hover effect is clearly visible without affecting the readability of the content.
Combine Multiple Effects Wisely
You can combine effects like shadow, opacity, and scale — but don't overuse them.
Fallback for Older Browsers
Add CSS vendor prefixes or fallback properties for older browsers that don't support modern CSS features.

Frequently Asked Questions

How do you change the image on the hover effect?

To change an image on hover using CSS is a simple yet effective way to add an extra layer of engagement to the website. It is a great way to create an interactive experience for users, which can help to keep them on the site longer and increase their overall satisfaction.

How do you apply the hover effect in CSS?

In CSS, in the style tag or the ".css" file, add the ": hover" to the CSS selector when styling your component.

How to disable hover in CSS?

Remove the ":hover" from the CSS selector from the style tag, and the animations will be removed that were there in the first place while you applied the hovering effect. Also, you can set the pointer-event properties of the specified element to none to achieve the same.

Why are image hover effects in CSS used?

Image hover effects in CSS are used so that images are more interactive and animated to make the website engaging.

Can hover be used on ID in CSS?

Yes, you can use the hover effect on a CSS selector that can be a class, ID, or an HTML attribute.

What is the banner hover effect?

A banner hover effect applies animations like zoom, color overlay, or text pop-up on a website banner when the user hovers over it.

How to create a zoom effect on image hover with CSS?

Use the transform: scale() property with the :hover selector to enlarge the image on hover. Apply transition for smooth animation.

How to apply the hover effect in CSS?

Use the :hover pseudo-class in CSS to apply visual changes like color, size, opacity, or animations when the user hovers over an element.

Conclusion

CSS helps you style your website the way you want it to. And images are great visual aids for your website. Thus, making your images interactive while hovering over them makes your website more engaging and responsive. In this article, we studied the concept of image hover effects in CSS with some examples.

If you want to design your website more and make it much more eye-catching, do read our following articles: