Elementor LOOP Styling: Custom POST Styling With an OPEN and CLOSE Effect on Hover | CSS Tips

In this tutorial, I will show you how to make the contents in your loop open preview and close on hover, this Book-like effect works for any dynamic content type you want to design, Products, and ACF Contents as well, with a few lines CSS.
You can Check out our other Videos On Elementor LOOP below
Elementor Loop Grid Tutorial | Post Excerpt, Equal Height - Elementor Pro
• Elementor Loop Grid Tu...
Elementor Loop Builder Tutorial: Custom Product Carousel & Archive, Product On Sale Ribbons & More
• Elementor Loop Builder...
Elementor Loop Builder Tutorial: Filter Product By Category Easily
• Elementor Loop Builder...
Elementor Tutorial: How To Style Numbered Pagination For Loop Grid (Posts and Products Widgets)
• Elementor Tutorial: Ho...
#elementor #wordpresstutorial #wordpress #csshover #css

[@thecreativarena]

Post Open and Close Effect on Hover CSS Code
/*Custom post loop styling Hover Effect*/
.card{
transform: perspective(2000px);
transition: 1s;
position: relative;
}
.card .card-open{
transition: 1s ;
transform-origin: left ;
}
.card:hover .card-open{
transform: perspective(2000px) rotateY(-135deg);
}
.card>.elementor-widget-wrap{
box-shadow: inset 300px 0px 50px rgba(0,0,0,0.5);
transition: 1s !important;
}
.card:hover>.elementor-widget-wrap{
box-shadow: inset 20px 0px 50px rgba(0,0,0,0.5);
}
.card:hover{
transform: perspective(2000px) rotate(-10deg);
z-index: 10 !important;
}
.card-details{
position: absolute;
left: 0;
top: 0;
}
/*EFFECt SHOW ON TABLET*/
@media (max-width: 767px) {
.card:hover .card-open{
transform: unset;
}
.card>.elementor-widget-wrap{
box-shadow: none;
}
.card:hover>.elementor-widget-wrap{
box-shadow: none;
}
.card:hover{
transform: unset;
}
.card-details{
position: relative;
}
}

[@triciastdominic-my3ri]

I love this ❤

[@serdimay7]

Awesome. Just asking, can this be achieved without CSS with motion effect and hover?

[@r0tt1ng]

You can animate items with elementor out of the box, but it's very limited and won't look as you want without additional customization.