<div class="list-thumb">
<img src="https://tiny.foto-note.com/wp-content/themes/foto-note-child/assets/img/sample/sample.jpg" alt="sakura">
</div>
/* hover effect */
.list-thumb {
position: relative;
width: 230px;
height: 230px;
overflow: hidden;
}
.list-thumb img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
transition-duration: 0.5s;
}
.list-thumb img:hover {
transform: scale(1.25, 1.25);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.