reveal text on hover css

Create Reveal Text On Card Hover Using HTML and CSS

Create Reveal Text On Card Hover Using HTML and CSS

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

 

Hello Coder! Welcome to The Codewithrandom blog. In this article, we learn how to create a Reveal Text On Card Hover Using Html and Css. In this Project, We have a card with an image, and when we hover over the card text lines and buttons are shown on the card. so let’s create this card on hover show text Using Only Html and Css.

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

Portfolio Website using HTML and CSS (Source Code)

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.

Code byanastasijaprogramer
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes
Reveal Card Text On Hover Table

Html Code For Reveal Text On Card 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.

Responsive Resume/CV Website Using HTML & CSS

Only Html Code Output

Reveal Text On Hover
Reveal Text On Hover
 

CSS Code For Reveal Text On Card 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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Final Output Of Reveal Text On Card Hover Using CSS:-

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

 

You can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Creating A Password Generator Using Javascript

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

Which code editor do you use for this Reveal Card Text On Hover coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!



Leave a Reply