<!DOCTYPE html>
<html>
<head>
<style>
.content {
width: 600px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
.content img {
max-width: 100%;
transform-origin: 50% 65%;
transition: transform 5s, filter 3s ease-in-out;
filter: brightness(150%);
}
/* The Transformation */
.content:hover img {
filter: brightness(100%);
transform: scale(3);
}
</style>
</head>
<body>
<p>Hover over the images to see the effect.</p>
<div class="content">
<img src="https://w3docs.com/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="Example image" />
</div>
</body>
</html>