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

Reveal Card Text On Hover Using HTML & CSS

Reveal Card Text On Hover Using HTML & CSS

 
Reveal Text On Hover Using HTML & CSS
Reveal Text On Hover Using HTML & CSS

 

Welcome to The CodeWithRandom blog. We learn how to create a Reveal Text On Hover. We use HTML and CSS for Reveal Text On Hover.

In this quick tutorial, I show how you can show text above Image when the user hovers the image using only HTML and CSS, no jQuery and JavaScript.

I hope you enjoy our blog so let’s start with a basic HTML structure for the Reveal Text On Hover.

There are two ways you can create a hover text for your HTML elements:

  • Adding the global title attribute for your HTML tags
  • Creating a tooltip CSS effect using :before selector

This tutorial will show you how to use both methods.

Html Code For Reveal Text On Hover

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover Reveal</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="card-wrapper">
<div class="card-top">
<img class="image" src="https://images.unsplash.com/photo-1499676763409-c0211693a66b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80">
</div>
<div class="card-bottom">
<span class="top-text">Premium Membership</span><br>
<span class="bottom-text">Join our membership program to download music for free, listen offline and skip songs</span>
<br>
<button class="button">Join Us</button>
</div>
</div>
</body>
</html>

There is all Html Code for the Reveal Text On Hover. Now, you can see output without CSS. then we write CSS for the Reveal Text On Hover.

50+ Html, Css & Javascript Projects With Source Code

Only Html Code Output

 

CSS Code For Reveal Text On Hover

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200&display=swap');
body {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Sarabun', sans-serif;
}
.image {
width: 100%;
height: 100%;
border-radius: 20px;
transition: all 0.3s ease-in-out;
z-index: 20;
box-shadow: 10px 10px 53px 0px rgba(0, 0, 0, 0.49);
}
.card-wrapper {
position: relative;
width: 400px;
height: 500px;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease-in-out;
box-shadow: 10px 10px 53px 0px rgba(0, 0, 0, 0.49);
}
.card-wrapper:hover .image {
filter: blur(1.4px);
transform: scale(1.5);
overflow: hidden;
transition: all 0.3s linear;
box-shadow: inset -6px -1px 32px 0px rgba(0, 0, 0, 0.75);
}
.card-wrapper:hover .card-bottom {
transform: translate(0%, -50%);
transition: all 0.8s ease;
background-color: rgba(110, 122, 92, 0.7);
}
.card-top {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.card-bottom {
width: 100%;
position: absolute;
z-index: 20;
display: nonee;
top: 50%;
background-color: rgba(110, 122, 92, 0);
padding: 100px 20px;
color: #fff;
transform: translate(100%, -50%);
}
.top-text {
font-size: 25px;
line-height: 40px;
font-weight: bold;
letter-spacing: 1px;
}
.bottom-text {
font-size: 15px;
}
.button {
position: relative;
display: block;
outline: none;
cursor: pointer;
margin-top: 25px;
border: none;
border-radius: 3px;
background-color: #f8961e;
color: #fff;
padding: 5px 20px;
}

You can change the position of the text container using the top bottom left right CSS properties.

  • Bottom left – bottom: 0 and left: 0
  • Top right – top: 0 and right: 0
  • Top left – top: 0 and left: 0

We have completed our Reveal Text On Hover. Here is our final updated output With Html and CSS.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Final Output Of Reveal Text On Hover Using HTML and CSS

Reveal Text On Hover Using HTML and CSS
Reveal Text On Hover Using HTML and CSS

 

Reveal Text On Hover Using HTML and CSS
Reveal Text On Hover Using HTML and CSS

 

We have completed our Reveal Text On Hover. Here is our updated output with Html and CSS. Hope you like the Reveal Text On Hover. you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Creating A Password Generator Using Javascript

This post teaches us to create a Reveal Text On Hover Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Happy Learning!!!

Written by – Code With Random/Anki
code by – anastasijaprogramer

Leave a Reply