<style>
.container{
width: 50px;
overflow: hidden;
}
img{
width: 1200px;
height: 300px;
vertical-align: top;
}
</style>
<body>
<div class="container">
<img src="https://picsum.photos/id/28/1200/300" alt="">
</div>
<div class="container">
<img src="https://picsum.photos/id/29/1200/300" alt="">
</div>
<div class="container">
<img src="https://picsum.photos/id/31/1200/300" alt="">
</div>
</body>
<script>
$(function(){
let iw = $(".container").find("img").eq(0).width();
$(".container").each(function() {
$(this).data("tf", true);
});
$(".container").mouseover(function() {
if ($(this).data("tf")) {
$(this).data("tf", false);
$(this).animate({"width": iw + "px"}, 3000, function() {
$(this).animate({"width": "50px"}, 1000, function() {
$(this).data("tf", true);
});
});
}
});
});
</script>