Image Text Reveal Hover Effect Using Only Html Css

Image Text Reveal Hover Effect Using Only Html Css

In this project we create an image with text reveals hover effect, it’s similar to a box hovercard effect and then text reveals.

So we make this project using html and css. So let’s write html Code.

Html 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>Reveal | What You Want</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="image_container">
    <img src="https://res.cloudinary.com/djix6uusx/image/upload/v1659354179/humming_bird_bzcaf5.jpg" />
    <span class="title">Humming Bird</span>
    <span class="description"
      >They are the only birds that can fly backwards and are capable of
      hovering for a period of time during flight.</span
    >
    <span class="line top"></span>
    <span class="line left"></span>
  </div>
</body>

</html>

This is our all-required Html code for image text reveal on hover effect. We use images and some text but we use a span tag instead of paragraph text for images.

In this code, we use css selector :hover and it’s very important for this project. We make this mobile-friendly also, we use media queries for responsiveness. We use animation, also so we remove the cursor from the image box and text hidden in a animation. That’s it for this project, you can see the preview below and make this project your way.

Now, this is only Html update output then we write css code for image styling and hover reveal functionality.

Html Updated Output

Image Text Reveal Hover Effect

Css Code

*,
:before,
:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image_container {
  position: relative;
  width: 95%;
  max-width: 500px;
  height: min(70vw, 300px);
  cursor: pointer;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image_container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(271, 76%, 53%);
  transform: scale(0);
  transition: all 800ms linear;
  transform-origin: 0 50%;
  z-index: 2;
  opacity: 0.3;
}

.image_container:hover:before {
  transform: scale(1);
}

span {
  position: absolute;
  color: #fff;
  opacity: 0;
  transition: all 800ms linear;
  z-index: 3;
}

.title {
  font-size: 2rem;
  left: 25%;
  top: 50%;
}

.description {
  font-size: 1rem;
  left: 25%;
  top: 65%;
  width: 50%;
}

.image_container:hover span {
  opacity: 1;
}

.line {
  left: 0;
  top: 0;
  position: absolute;
  background: #fff;
  transition: all 800ms linear;
}

.top {
  width: 3px;
  height: 0;
  left: 20%;
}

.image_container:hover .top {
  height: 100%;
}

.left {
  width: 0;
  height: 3px;
  top: 95%;
}

.image_container:hover .left {
  width: 100%;
}

@media (max-width: 424px) {
  .title {
    font-size: 1.5rem;
    left: 25%;
    top: 50%;
  }

  .description {
    font-size: 0.8rem;
    left: 25%;
    top: 65%;
    width: 50%;
  }
}

In this code, we use css selector :hover and it’s very important for this project. We make this mobile-friendly also, we use media queries for responsiveness. We use animation, also so we remove the cursor from the image box and text hidden in an animation.

That’s it for this project, you can see the preview below and make this project your way.

Css Updated Output(Final Output)

Image Text Reveal Hover Effect css

Image Text Reveal Hover Effect css

Hope you like this project, we create your own and use this project in any project as part project like the reviews section, contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Sasha

written by – Codewithrandom

Share on:

Leave a Comment