Slick Slider with Video

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by Mwanitete

HTML

<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="//vjs.zencdn.net/4.9.0/video-js.css">
<script src="//pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<!DOCTYPE html>
<html>

<body>
    <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
  />
  
  
<div class="col-md-4">
  <div class="for_her_card card">
    <img src="https://i.ibb.co/5TRmyKQ/squash.png" />
    <h1>DEMO</h1>
    <div class="first_squash" id="squash_image">
    <div class="center-text">
            <h1 class="squash_header">Squash</h1>
            <span class="squash_details">12.02.2018</span>
        </div>
        </div>
  </div>
</div>
        
        
        
        
</body>

</html>

CSS

.for_her_card img {
    width: 250px;
    height: 148px;
}

.for_her_card h1 {
    font-size: 17px;
    font-family: "Open Sans Condensed";
    color: rgb(241, 107, 108);
    font-weight: bold;
    line-height: 1.2;
    text-indent: 2.65px;
    margin-top: 11px;
    overflow: hidden;
}

#squash_image{
    background-color: rgb(255, 241, 241);

    background-image: url('https://i.ibb.co/qR92CLy/heart.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/* hover */

.for_her_card:hover .first_squash{
    display: block;
    height: 100%;
}

.first_squash {
display: none;
position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.center-text{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0px auto;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
}