0

Как сделать этот же эффект замены картинки, только по клику? Наверное 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>

1 ответ 1

4

$(".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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.