Youtube link - click here
<!DOCTYPE html>
<html>
<head>
<title>
card animation
</title>
<style>
.container {
width: 900px;
height: 100vh;
margin: 0px auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
img {
width: 100px;
height: 100px;
}
.cards {
width: 200px;
height: 200px;
position: absolute;
transition: 2s;
border-radius: 20px;
}
#center-card {
background-color: #feffdf;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0px 5px 2px grey;
}
#left {
padding: 20px;
transition: 2s;
background-color: #e0ffcd;
transform-origin: bottom left;
}
#right {
padding: 20px;
transition: 2s;
background-color: #2f1b41;
transform-origin: bottom right;
color: white;
}
#center-card:hover+#left {
left: 30%;
transform: rotate(-10deg);
}
#center-card:hover~#right {
right: 30%;
transform: rotate(10deg);
}
</style>
</head>
<body>
<div class="container">
<div class="cards" id='center-card'>
<div id="profile">
<img src="https://tse3.mm.bing.net/th?id=OIP.yXkf1qSH0fqTMtFoYI4lAwHaHa&pid=Api&P=0&w=300&h=300">
</div>
<div id='name'>
IRON MAN
</div>
</div>
<div class="cards" id="left">
<img src="https://tse2.mm.bing.net/th?id=OIP.h9rmoEpfREtIgYyafGme0QHaHZ&pid=Api&P=0&w=300&h=300">
</div>
<div class="cards" id='right'>
PESTICIDE CONTROL USING ARDUINO
</div>
</div>
</body>
</html>
Post a Comment