Как сделать этот же эффект замены картинки, только по клику? Наверное toggleClass
надо использовать, но как?
$(".card-image").click(function() {
$(".card-image img").toggleClass("transparent");
});
.card-image img {
display: block;
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
}
.card-image img.first {
position: absolute;
opacity: 0;
transition: all 0.5s ease;
}
.card-image:hover img.first {
opacity: 1;
transition: all 0.5s ease;
}
.card-image img.second {
transition: all 0.5s ease;
}
.card-image:hover img.second {
opacity: 0;
transition: all 0.5s ease;
transform: scale(0, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-image">
<img class="second" src="https://i.sstatic.net/kSOSd.jpg">
<img class="first" src="https://i.sstatic.net/17BmD.jpg">
</div>