JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<div class="photo-containers-test">
  <div class="parent-photo-container">
    <img src="https://media1.popsugar-assets.com/files/thumbor/mycOrIvY8rgt24INHoUOskGXIpk/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/19/978/n/1922507/3a1a55fda9cc796d_thumb_temp_image13465311411161397/i/Funny-Cat-Costumes.jpg" style="width"/>
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo" /></a>
  </div>
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo top-right" /></a>
  </div>
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo bottom-right" /></a>
  </div>
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo bottom-left" /></a>
  </div>
  <div class="parent-photo-container">
    <a class="linkme" href="http://www.mayashavin.com" target="_blank"><img src="http://cdn.boilerroom.tv/wp-content/uploads/2014/08/cute.jpg?7c4b8e" class="child-photo middle" /></a>
  </div>
</div>

CSS

.photo-containers-test {
  display: grid;
  grid-template-columns: 210px 210px 210px 210px 210px;
}

.parent-photo-container {
  background-size: 200px 200px;
  height: 200px;
  width: 200px;
  position: relative;
}

.child-photo {
  width: 100px;
  height: 50px;
  opacity: 0;
  position:absolute;
}

.child-photo.top-right{
  transform: translateX(100%);
}

.child-photo.bottom-right{
  transform: translate(100%, 300%);/*50px + 300% * 50px to get the bottom position*/
}

.child-photo.bottom-left{
  transform: translateY(300%);
}

.child-photo.middle{
  transform: translate(50%, 150%);
}

.parent-photo-container:hover .child-photo{
  opacity: 0.8;
  transition: opacity ease-in-out 0.5s;
}