Once a wise man said to become a great frontend developer let your creativity go wild. So I let my creativity run wild and came up with this awesome cool image hover effect using CSS only.

Also Read - Which CSS property controls the text size? (The font-size CSS property)

Learning the CSS hover effect on an image can make you archive a beautiful website. So we will learn some basic CSS animations in this post.

Website designs usually involve hover effects. Hover effects give the user feedback about the element they are trying to click.

How does CSS know that the user hovered on an element?

CSS has a selector called :hover which we can use to add hover effects to any elements.

Why use hover effects?

Hover effects are a great way to interact with the user and keep him engaged with the website. So to show an interactive element of the website, like a button, we use the hover effect.

Also read: How to create shapes in CSS

How to create CSS hover effect on an Image?

First, here is the result


Alright, enough talking, let’s get started. First, of all as with any new vanilla web project, we will be writing HTML code.

So let’s create an index.html file and then write some boilerplate code to it. Then we will create a CSS file named main.css.

<!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" />
    <link rel="stylesheet" href="main.css" />
    <title>CSS Hover effect on Image</title>
  </head>
  <body></body>
</html>

Woh! Take it easy. It’s not gonna eat you. We will understand it bit by bit.

In the head section, we linked our main.css file. And add a title called “CSS Hover effect on Image”. The rest of the code is boilerplate, you can copy and paste it.

Now let’s add some more code to work with

<!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" />
    <link rel="stylesheet" href="image.css" />
    <title>CSS Hover effect on Image</title>
  </head>
  <body>
    <div class="container">
      <div class="txtSlide">
        <div class="text">
          <h2>Jhon</h2>
          <p>I am a cool guy</p>
        </div>
      </div>
      <div class="imgSlide">
        <img src="https://picsum.photos/200" alt="random pic" />
      </div>
    </div>
  </body>
</html>

Here we have added a div tag to represent a container for our image and text slides. Then we have txtSlide and imgSlide. We put txtSlide before imgSlide, So it can cover txtSlide.

Now let’s write CSS

First, we will give our container a width of 200 pixels, so that we can hover over it.

.container {
  width: 200px;
}

Then we will give our image and text slides a height and width of 200 pixels, so they are the same size. It’s important to hide text slides behind image slides.

.imgSlide {
  height: 200px;
  width: 200px;
}

.txtSlide {
  height: 200px;
  width: 200px;
  background-color: #0a0e31;
}

Just for the sake of the design we will add a cool shadow to our imgSlide and textSlide

.imgSlide,
.txtSlide {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35),
    0 8px 12px rgba(0, 0, 0, 0.15);
}

Now we will decorate our text, and depends on the website design. Therefore, this is up to you how you want to do it. But for now, you can copy and paste the below code.

.text {
  text-align: center;
  padding-top: 50px;
  text-shadow: 0 0 10px white;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

Now we will translate our image on Y-axis by -200 pixels, as a result, we are sliding the imgSlide on the txtSlide.
We can do this by using the transform property. The transform property applies a transformation to an element.

.imgSlide {
  height: 200px;
  width: 200px;
  transform: translateY(-200px); /* Add this */
}

Now we will use :hover selector to the container. And when it’s hovered we will change imgSlide and txtSlide transformation.

.container:hover .imgSlide {
  transform: translateY(-300px);
}

.container:hover .txtSlide {
  transform: translateY(100px);
}

Almost done. Our hover effect is working, but it’s not smooth.
We need to animate this, So it feels smooth. We can do this by adding transition property to imgSlide and txtSlide with a value of 0.8 seconds.

.imgSlide {
  height: 200px;
  width: 200px;
  transform: translateY(-200px);
  transition: 0.8s; /* Add this */
}

.txtSlide {
  height: 200px;
  width: 200px;
  transition: 0.8s; /* Add this */
}

Wow! We did it.

Do comment and share, It motivates me to write more new posts like this. And don’t hesitate to ask any questions in the comment section.