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

Reveal Card Text On Hover Using HTML and CSS

Telegram Group Join Now

Reveal Card Text On Hover Using HTML and 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 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.

ADVERTISEMENT

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 by anastasijaprogramer
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive Yes
Reveal Card Text On Hover Table

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.

Responsive Resume/CV Website Using HTML & CSS

Only Html Code Output

Card Hover Reveal Text | Only Html Css On Hover Text Reveal
 

 

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.

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

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

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

ADVERTISEMENT

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Leave a Reply