Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- 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;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement