css hover effect on image
css hover effect on image

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

See the Pen CSS hover effect on Image by Rare Programmer (@rareprogrammer) on CodePen.

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;
  box-shadow: 0px 0px 5px gray;
}

.txtSlide {
  height: 200px;
  width: 200px;
  background-color: white;
  box-shadow: 0px 0px 5px gray;
}

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 gray;
  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;
  box-shadow: 0px 0px 5px gray;
  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;
  box-shadow: 0px 0px 5px gray;
  transform: translateY(-200px);
  transition: 0.8s; /* Add this */
}

.txtSlide {
  height: 200px;
  width: 200px;
  background-color: white;
  box-shadow: 0px 0px 5px gray;
  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.

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply