You are currently viewing Image Text Reveal On Hover Effect Using HTML & CSS

Image Text Reveal On Hover Effect Using HTML & CSS

Image Text Reveal On Hover Effect Using HTML & CSS

In This Project We Create An Image Text that Reveals Hover Effect, It’s Similar To A Box Hovercard Effect And Then Text Reveals on Hover. So we make this Image Text Reveal On Hover Effect project using Only Html and Css.

So let’s write html Code For Image Text Reveal On Hover Effect.

Html Code For Image Text Reveal On Hover

<!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.

50+ HTML, CSS & JavaScript Projects With Source Code

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 On Hover Effect Using HTML & CSS

Css Code Image Text Reveal On Hover

*,
: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.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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

Final Output Of Image Text Reveal On Hover Effect


Image Text Reveal On Hover Effect Using HTML & CSS

Image Text Reveal On Hover Effect Using HTML & CSS
Image Text Reveal On Hover Effect Using HTML & 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💝.

Create Quiz App Using HTML, CSS & 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 – Ritika Agrawal

written by – Codewithrandom

Leave a Reply