How to show speaker info on hover?

Do you want to enhance your website with interactive elements, such as a speaker description visible when hovering over an image? Below, you will find a detailed guide on how to do this.

Step 1: Adding a Speaker Section

1. Go to Website > List of Pages and select the tab you want to edit.
2. Add a section from the Speakers group, as shown in the example below:

Step 2: Configuring the Section ID

Add an element ID for this section to ensure that the styling and functionality apply only to the selected element.

Step 3: Adding the Speaker Description

1. In the HTML code, locate the element representing the speaker’s photo < img >.

2. Below each image, add a element with the class “hover-description” that will contain the speaker’s description.

   <div class="hover-description">
   Here is your content.
   </div>

   It should look like the screenshot below:

Step 4: Adding More Speakers

If you want to add more than three speakers, use the “duplicate” option to add another row. Remember to replace the descriptions and images.

Step 5: Styling in CSS

1. Go to Settings > For Developers > custom.css.
2. Paste the following CSS code, which will enable the speaker’s description to appear when hovering over the image:

#speakers .column {
    position: relative;
}

#speakers .column img {
    display: block;
    width: 100%;
    height: auto;
}

.hover-description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px;
    text-align:left;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#speakers .column:hover .hover-description {
    opacity: 1;
    pointer-events: auto; 
}

Step 6: Saving and Testing Changes

1. Save all changes in the system.
2. Go to the page where you made the modifications.
3. When hovering over the speaker’s photo, their description should appear.

This way, you will add an attractive, interactive feature to your website that will grab the attention of visitors.