In this video, we will create an awesome text effect CSS only. This video on how to clip image on text using -webkit-background-clip. For a preview click on Demo If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files. Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇 HTML <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >How to clip image on text</ title > <!-- style.css --> < link rel = "stylesheet" href = "style.css" > </ head > < body >
In this video, we will create an awesome card UI design with an amazing hover animation effect using only HTML & CSS.
You can use it in your next project to get more of a client or user impression.
If you want to get the complete source code in a zip file then click the "Fork me on GitHub" button below that will redirect you to my GitHub account where you found all my source code files.
Copy Code(select code part and copy using "CTRL + C" or using R Click to mouse)🡇
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Card Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- card -->
<div class="card">
<div class="circles c1"></div>
<!-- card body -->
<div class="card-img">
<img src="img.png" alt="img">
</div>
<div class="card-content">
<h4>Supercell</h4>
<h2>Clash Royale</h2>
<h5>Exp 8</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipi elit rnatur.</p>
</div>
<!-- card body -->
<div class="circles c2"></div>
</div>
<!-- card -->
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #2a3a49;
font-family: 'Poppins', sans-serif;
}
.card {
width: 30em;
height: 15em;
background-color: #2a3a49;
border-radius: 32px;
position: relative;
display: flex;
justify-content: center;
}
.card::before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 30.5em;
height: 15.5em;
background: linear-gradient(160deg, #f8fd01, #f8fd01b4, #263542, #263542, #03dee0b4, #03dee0);
border-radius: 35px;
transform: translate(-50%, -50%);
}
.circles {
position: absolute;
z-index: 1;
filter: blur(50px);
}
.c1 {
top: 0;
left: 0;
width: 3em;
height: 3em;
background-color: #f8fd01;
}
.c2 {
bottom: -7%;
right: -5%;
width: 4em;
height: 4em;
background-color: #03dee0;
}
.card-img {
width: 35%;
height: 100%;
position: relative;
}
.card-img img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.card:hover .card-img img {
animation: zoom 0.8s cubic-bezier(1, 2, 0.2, 0.6);
}
@keyframes zoom {
0% {
transform: scale(0) translate(-150%, -200%);
}
100% {
transform: scale(1) translate(-50%, -50%);
}
}
.card-content {
width: 65%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 30px;
}
.card-content h4 {
color: #7f94a5;
text-transform: uppercase;
letter-spacing: 2px;
}
.card-content h2 {
color: #fff;
text-transform: capitalize;
}
.card-content h5 {
color: #03dee0;
text-transform: uppercase;
margin-top: 8px;
}
.card-content p {
color: #7f94a5;
margin-top: 12px;
}
Fork me on GitHub
Subscribe to me on YouTube
Like & Comment on my video on YouTube & press the bell icon to get notification first.
Follow me on Instagram
Comment down any query if you have.
Uploaded new blogs latest
ReplyDelete