holder bg or img

Change class name on click in jQuery

by toubia95

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.min.js"></script>
<div class="image_container">
<img class="image" src="https://repository.ortolang.fr/api/thumbs/mediapi-skel/v1/mediapi-skel.png">
</div>
<div class="image_container">
<img class="image" src="holder.js/730x150?theme=thumb&bg=888888&fg=eceeef&text=HOLDER">
</div>
<div class="image_container">
<img class="image" src="">
</div>
<div class="image_container">
</div>

CSS

/* https://developer.mozilla.org/fr/docs/Web/CSS/object-fit */

.image_container {
  height: 150px !important;
  max-height: 150px !important;
  overflow: hidden;
  display: block;
  background-color: #888888;
}

.image {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #888888;
}

.image_container img {
  transition: transform 0.5s ease;
}

.image_container:hover img {
  transform: scale(1.5);
}