Üstüne gelince resim değiştirme nasıl yapabilirim?
"img" etiketiyle yerleştirdiğim resmin üstüne gelindiğinde gif olarak değişmesini istiyorum, olmadı gifin üstüne gelindiğinde nasıl oynayacağı da olur. Biraz bakındım, sadece "background-image" kullanılarak yapılanları bulabildim.
CodePen: https://codepen.io/P42s/pen/xxpGJyN
<div class="item">
<img class="item__img" data-swap="https://i.giphy.com/media/l41m359K5ExF8aRoc/giphy.gif" src="https://www.wallpaperup.com/uploads/wallpapers/2015/05/29/702762/c7481417c549c5733d851692740f24db-700.jpg" alt="">
</div>
.item {
width: 350px;
height: 250px;
position: relative;
overflow: hidden;
}
.item__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0 30%;
}
var imageSwap = function () {
var $this = $(this);
var newSource = $this.data("swap");
$this.data("swap", $this.attr("src"));
$this.attr("src", newSource);
};
$(function () {
$(".item__bg").hover(imageSwap, imageSwap);
});