(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirements –
1 – Elementor Pro
Info Card Reveal with CSS & Elementor
- You will have to change the value of clip-path based on the size of your card.
- This design was inspired by https://codepen.io/davidjsealey/pen/dyYPQLR
1. Top Right Card Reveal
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
selector {
clip-path: circle(8% at 90% 17%);
transition:1s ease-in-out;
}
selector:hover {
clip-path: circle(100%);
}
.dm-info-icon {
transition: opacity 1s;
}
selector:hover .dm-info-icon {
opacity: 0;
}
@media(max-width:767px) {
selector {
clip-path: circle(8% at 90% 17%);
transition:1s ease-in-out;
}
}
2. Top left Card Reveal
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.dm-info-icon {
transition: opacity 1s;
}
selector:hover .dm-info-icon {
opacity: 0;
}
selector {
clip-path: circle(8% at 8% 17%);
transition:1s ease-in-out;
}
selector:hover {
clip-path: circle(100%);
}
@media(max-width:767px) {
selector {
clip-path: circle(8% at 11% 10%);
transition:1s ease-in-out;
}
}
3. Bottom left Card Reveal
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.dm-info-icon {
transition: opacity 1s;
}
selector:hover .dm-info-icon {
opacity: 0;
}
selector {
clip-path: circle(8% at 8% 83%);
transition:1s ease-in-out;
}
selector:hover {
clip-path: circle(100%);
}
@media(max-width:767px) {
selector {
clip-path: circle(8% at 11% 90%);
transition:1s ease-in-out;
}
}
4. Bottom Right Card Reveal
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
.dm-info-icon {
transition: opacity 1s;
}
selector:hover .dm-info-icon {
opacity: 0;
}
selector {
clip-path: circle(8% at 92% 83%);
transition:1s ease-in-out;
}
selector:hover {
clip-path: circle(100%);
}
@media(max-width:767px) {
selector {
clip-path: circle(8% at 90% 90%);
transition:1s ease-in-out;
}
}
