In this tutorial, we will explore how you can transform your website using the free version of Elementor to create pop-up cards that will not only capture your visitors’ attention, but also provide them with an interactive and dynamic experience. Pop-up cards are an effective tool for displaying information in a concise and attractive way, allowing you to present content in a way that expands when interacted with – ideal for portfolios, FAQ sections, or simply to give an innovative touch to any website.
You will learn step by step how to implement dropdown cards using CSS in conjunction with Elementor. We will guide you from the initial setup of Elementor to applying specific CSS styles that allow cards to resize and reveal hidden content on hover. We will use CSS code that includes transition properties to achieve a smooth and attractive effect. This effect not only improves the aesthetics of your site, but also makes navigation more intuitive and enjoyable for users. Get ready to take a qualitative leap in the presentation of your content with Elementor.
.container .card { position: relative; height: 280px; transition: 0.3s ease-in-out; } .container .card:hover { height: 470px; } .container .card .imgBx { position: relative; top: -60px; z-index: 1; } .container .card .content { position: relative; margin-top: -120px; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } .container .card:hover .content { visibility: visible; opacity: 1; margin-top: -40px; transition-delay: 0.3s; } @media only screen and (max-width: 767px) { .container .card { height: 150px; } .container .card:hover { height: 390px; } }
