CARD HOVER
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Hover</title>
</head>
<body>
<div class="myclass">
<img src="https://img.freepik.com/premium-photo/cartoon-young-man-wearing-shirt-tie_487986-51427.jpg?semt=ais_hybrid" alt="Male">
<div class="male">
<h2>Abhi</h2>
<p>Software Developer</p>
</div>
</div>
<div class="myclass">
<img src="https://img.freepik.com/premium-psd/beautiful-indian-woman-indian-illustration_1279565-8557.jpg?semt=ais_hybrid" alt="Female">
<div class="female">
<h2>Bhuvi</h2>
<p>Doctor</p>
</div></div>
</body>
</html>
CSS
.myclass{
height:230px;
width:100px;
display: inline-block;
border:2px solid black;
border-radius: 10px;
margin: 10px;
box-shadow: 2px 4px 8px black;
transition: 1s;
}
img{
width: 100px;
border-radius: 10px 8px 0 0;
}
h2{
text-align: center;
}
p{
text-align: center;
border-radius: 0 0 8px 10px;
}
.female{
padding: 20px 20px 5px 20px;
background-color: antiquewhite;
}
.male{
padding:5px 2px 3px 4px;
background-color: beige;
}
.myclass:hover{
box-shadow: 2px 10px 15px lightcoral;
border-radius: 6px;
}
Comments
Post a Comment