Within the Fluidal theme, you can create a box that shows a title which gets replaced with text when you hover over it. You can also set this box to be clickable through to another URL. To do this simply use the [overlay][/overlay] shortcode. There are quite a lot of useful parameters for this shortcode so you can create some really interesting blocks of content.
[overlay title="" bg-colour="white" bg-image="" colour="inherit" height="320" width="auto" class="" id="" url=""]
Text to appear on hover
[/overlay]
Parameter options:
title = the title of the overlay. The title is replaced with the hover text when you move the mouse over the box
bg-colour = the background colour for the overlay. Use either a hex code or friendly name e.g. #444 or blue
bg-image = the URL of an image to fill the width and height of the overlay. Make sure it's just the URL of the image and not an img src tag as well.
colour = the text colour for the overlay. If not specified, it will inherit from further up the stylesheet
height = sets a minimum height for the box (think how this box gets displayed on mobile screens)
class = type a CSS class name if you wish to control this box further via a CSS stylesheet
id = type a CSS id if you wish to control this box further via a CSS stylesheet
url = type a URL if you wish this box to be clickable to another page or external address
Depending on the site, some further tweaks to the CSS might be required to ensure that all of this styling works. Ask for help if required.
If you don’t specify one of the parameters then it’ll use the default ones as above.
Example 1
[overlay bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/stormy-background.jpg" title="Title of box"]
Text to appear on hover lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus.
[/overlay]
Example 2
The following example also uses the [one_half][/one_half] and [one_half_last][/one_half_last] shortcodes to create a 2 column layout in which the [overlay][/overlay] shortcode is placed into each one.
[one_half]
[overlay bg-image="https://duncanarrow.com/wp-content/uploads/2021/02/crazy-you.jpg" title="Are we all going mad?" height="450" url="https://duncanarrow.com/wp-content/uploads/2021/02/crazy-you.jpg"]Text to appear on hover lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus.
[/overlay]
[/one_half]
[one_half_last]
[overlay bg-image="https://duncanarrow.com/wp-content/uploads/2019/07/hello.jpg" title="Come and say hello" height="450" width="auto" url="https://duncanarrow.com/wp-content/uploads/2019/07/hello.jpg"]Text to appear on hover lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci quam, venenatis vel ante a, luctus semper elit. Morbi cursus iaculis quam et faucibus.
[/overlay]
[/one_half_last]
