Смена картинки по клику?

Question

Как сделать этот же эффект замены картинки, только по клику? Наверное 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.stack.imgur.com/kSOSd.jpg">
  <img class="first" src="https://i.stack.imgur.com/17BmD.jpg">
</div>

Answer 1

$(".card-image").click(function() {
  $(".card-image img").toggleClass("active");
});

.card-image img {
  position: absolute;
  border-radius: 2px 2px 0 0;  
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transition: all 0.5s ease;
  opacity: 0;
  transform: scale(0,1);      
}

.card-image img.active {
  opacity: 1;  
  transform: scale(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.stack.imgur.com/kSOSd.jpg">
  <img class="first active" src="https://i.stack.imgur.com/17BmD.jpg">
</div>

БЛОГ НА HUSL

Смена картинки по клику?

Ответы (1 шт):