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







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





Welcome🎉 to Code With Random blog. We learn how to create a Card Hover Reveal Text. We use HTML & CSS  for Card Hover Reveal Text. Hope you enjoy our blog so let’s start with a basic HTML structure for the Card Hover Reveal Text.  

HTML code

 <!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 Card Hover Reveal Text. Now, you can see output without CSS, then we write CSS for the Card Hover Reveal Text.

Output

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

CSS code

 @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;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

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

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

We have completed our CSS section,  Here is our updated output with CSSHope you like the Card Hover Reveal Text, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

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

Written by – Code With Random/Anki 

code by – anastasijaprogramer

Check out more…..



Share on:

Leave a Comment