Card zoom-in: Hover Animation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Animation</title>
<!-- CSS Code -->
<style>
.card{
width: 1000px;
height: 1000px;
background-color: rgb(87, 29, 180);
border-radius: 10px;
outline: 1px solid rgba(255, 255,255,.5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
position: relative;
overflow: hidden;
}
.card-image{
position: relative;
inset: 0;
width: 1000px;
height: 1000px;
object-fit: cover;
opacity: .6;
transition: transform .75s;
}
.card:hover .card-image{
transform: scale(1.15);
}
.card-title{
position: absolute;
left: 2px;
bottom: 1px;
font-size: 100px;
text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
</style>
</head>
<!-- HTML Code -->
<body>
<div class="card">
<img src="cool.jpg" alt="" class="card-image">
<h3 class="card-title">The Animation</h3>
</div>
</body>
</html>