How to add a description of the speaker visible when hovering over the image?
Roksana
Last Update 13 days ago
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.
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:
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.