Animated Card Hover CSS

/*
Tutorial video: https://youtu.be/gyxRnOGIKqE
Replace .blog-wrapper and .blog-card with the css class of your card container and your post card respectively
*/

.blog-wrapper::before {
  content: "";
  background-color: #222;
  position: absolute;
  width: calc(100% / 3);
  height:100%;
  z-index: -1;
  translate: 0 0;
  opacity: 0;
  border-radius: 8px;
  transition: translate 200ms;
}
.blog-wrapper:has(.blog-card:nth-child(1):hover)::before,.blog-wrapper:has(.blog-card:nth-child(1):focus-within)::before {
  translate: 0 0;
  opacity: 1;
}
.blog-wrapper:has(.blog-card:nth-child(2):hover)::before,.blog-wrapper:has(.blog-card:nth-child(2):focus-within)::before {
  translate: 100% 0;
  opacity: 1;
}
.blog-wrapper:has(.blog-card:nth-child(3):hover)::before,.blog-wrapper:has(.blog-card:nth-child(3):focus-within)::before {
  translate: 200% 0;
  opacity: 1;
}