<div class="blocks">
  <div class="block">
    <div class="overlay">
      <img src="http://drh.img.digitalriver.com/DRHM/Storefront/Site/atvi/cm/images/site/play-button-overlay.png" alt="Play" />
    </div>
    <img src="https://pen-online.com/fr/wp-content/uploads/2021/02/17171114/%E5%B1%B1%E4%B8%8B%E9%81%94%E9%83%8E%E3%80%80%E3%80%8CFor-You%E3%80%8D-1024x1011.jpg" alt="Image" />
  </div>

  <div class="block">
    <div class="overlay">
      <img src="http://drh.img.digitalriver.com/DRHM/Storefront/Site/atvi/cm/images/site/play-button-overlay.png" alt="Play" />
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/en/7/78/Octoberrust.jpg" alt="Image" />
  </div>

  <div class="block">
    <div class="overlay">
      <img src="http://drh.img.digitalriver.com/DRHM/Storefront/Site/atvi/cm/images/site/play-button-overlay.png" alt="Play" />
    </div>
    <img src="https://lastfm.freetls.fastly.net/i/u/770x0/77c89fd33870424b8ef6ff6022a51c10.jpg" alt="Image" />
  </div>

  <div class="block">
    <div class="overlay">
      <img src="http://drh.img.digitalriver.com/DRHM/Storefront/Site/atvi/cm/images/site/play-button-overlay.png" alt="Play" />
    </div>
    <img src="https://images-na.ssl-images-amazon.com/images/I/71pcBizXY7L._SL1425_.jpg" alt="Image" />
  </div>
</div>

html {
  height: 100%;
  width: 100%;
}

body {
  background: #eee linear-gradient(135deg, #2980b9, #9b59b6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;

  .blocks {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .block {
      position: relative;
      display: block;
      width: 200px;
      height: 200px;
      margin: 20px;
      transform: perspective(600px) rotateY(-30deg);
      transition: transform .3s;

      img {
        width: auto;
        max-width: 100%;
      }

      .overlay {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        background-color: rgba(0, 0, 0, .5);
        opacity: 0;
        transition: opacity .3s ease;
        -webkit-transform:translate3d(0,0,0);

        img {
          width: auto;
          max-width: 50%;
        }
      }

      &.hover, &:hover {
        transform: rotateY(0);
        cursor: pointer;

        .overlay {
          opacity: 1;
        }
      }
    }
  }
}

// No JavaScript needed my friend !

// Below code only for demo purposes
// You can remove the `&.hover,` class from the CSS
// if you don't need it (line no. 55)
$(document).ready(function() {
  var count = 0;
  var blocks = $(".block");

  var testEffect = setInterval(function() {
    $(blocks[count - 1]).removeClass("hover");
    $(blocks[count]).addClass("hover");
    count++;
    if (count > 4) clearInterval(testEffect);
  }, 800);
});