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.
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 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.
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.
1.Bottom left – bottom: 0 and left: 0
2.Top right – top: 0 and right: 0
3.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.
You can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
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
Top comments (0)