JSFiddle - React, Tailwind, and code Playground

by edwo

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <p>I can't see the whole image on hover.</p>
  
  <div class="my-slider">
    <div><img class="zoom-it" src="http://placehold.it/100x100?text=A1"></div>
    <div><img class="zoom-it" src="http://placehold.it/100x100?text=A2"></div>
    <div><img class="zoom-it" src="http://placehold.it/100x100?text=A3"></div>
    <div><img class="zoom-it" src="http://placehold.it/100x100?text=A4"></div>
    <div><img class="zoom-it" src="http://placehold.it/100x100?text=A5"></div>
  </div>

CSS

.zoom-it {
  border: red solid 5px;
  position: relative;
  z-index: 9999;
}

.zoom-it:hover {
  transform: scale(2);
}

JavaScript

$(document).ready(function(){
  $('.my-slider').slick({
      infinite: true,
      slidesToShow: 3,
      dots: true
  });
});