How Do You Make a Pop Up Card in Webflow?

Creating a pop-up card in Webflow can add an interactive and visually appealing element to your website. In this tutorial, we will walk you through the steps to design and implement a pop-up card using Webflow’s powerful features. Let’s dive in!

Step 1: Setting up the Structure

The first step is to set up the basic structure of your pop-up card. You can start by creating a container div using the <div> tag and giving it a class name like “pop-up-container”. Inside this div, you need to create two more divs:

• <div> with class “card”
• <div> with class “content”

The “card” div will represent the front face of the pop-up card, while the “content” div will hold the actual content that appears when the card is clicked or hovered over.

Step 2: Styling the Pop-Up Card

To make your pop-up card visually appealing, you can style it according to your preferences. You can use CSS properties like background-color, border-radius, and box-shadow to give it a sleek look. For example:

<style>
  .pop-up-container {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  
  .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('card-front.png');
    background-size: cover;
    border-radius: 10px;
    z-index: 2;
  }
  
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    display: none; /* We will show this later with JavaScript */
    z-index: 1;
  }
</style>

In the above example, we have given the pop-up container a fixed width and height, a white background color, and added a subtle box-shadow effect. The “card” div is positioned absolutely to overlap the “content” div initially.

Step 3: Adding Interactivity with JavaScript

Now that we have set up the structure and styled our pop-up card, let’s make it interactive. We will use JavaScript to toggle the visibility of the “content” div when the card is clicked or hovered over.

<script>
// Get references to the card and content elements
const card = document.querySelector('.card');
const content = document.content');

// Add event listeners to toggle content visibility
card.addEventListener('click', () => {
   content.style.display = 'block';
});

// You can also add a hover effect using mouseover and mouseout events
card.addEventListener('mouseover', () => {
   content.display = 'block';
});

card.addEventListener('mouseout', () => {
   content.display = 'none';
});
</script>

The above JavaScript code selects both the “card” and “content” elements using their class names. It then adds event listeners to toggle the visibility of the “content” div when the card is clicked or hovered over. The display: none; property initially hides the “content” div, and setting it to block shows it when triggered.

Step 4: Adding Content to the Pop-Up Card

Finally, let’s add some content to our pop-up card. You can use HTML tags like <p>, <h3>, and <ul> to structure your content and make it more readable.

<div class="content">
  <h3>Welcome to our Pop-Up Card!</h3>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

  <p class="highlight"><b><u>Remember</u></b>, you can customize this pop-up card as per your requirements.</p>
</div>

In the above code snippet, we have added a heading (<h3>), a paragraph (<p>), and a list (<ul>) with three items (>