Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Image Hover Effects
3.
Examples
3.1.
Sliding Text on Image
3.2.
Scaling an Image
3.3.
Rotating and Swapping an Image
3.4.
Fading Out an Image
3.5.
Multilayering an Image
4.
Frequently Asked Questions
4.1.
How do you change the image on hover effect?
4.2.
How do you apply the hover effect in CSS?
4.3.
How to disable hover in CSS?
4.4.
Why are image hover effects in CSS used?
4.5.
Can hover be used on ID in CSS?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Image Hover Effects in CSS

Author Nikunj Goel
1 upvote

Introduction

Hello, ninjas! When designing a website, you must consider making your images as interactive as possible. Well, it is entirely possible by adding image hover effects in CSS. In this article, we will explore this topic with some interesting examples.

intro to image hover effects in css

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.

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

sliding text hover effect

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

scaling hover effect output

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

rotating and swapping hover output

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

fading hover effect output

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

multilayering hover effect output

Check this out :  Versions of CSS

Frequently Asked Questions

How do you change the image on 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.

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:

To learn more about DSA, competitive coding, and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available. Please check out our interview experiences and interview bundle for placement preparations.

Happy Coding!

Live masterclass