Simple text description hover?

[vthevoz]

Hello!

I'm setting up a really simple 2-column page, with images on the left and on the right (or carousels or videos when relevant) and wish to have their captions display upon mouse click (or hover if it's easier).

Ideally in a pop-up contained box (which is 10% height of the images and same width as pictures, white background), bottom aligned with the pictures, text aligned to the left (as screenshot attached)

Is there an easy way to do this without jQuery requests and CSS styling (I think not…). What would your easiest suggestion be?

Thanks in advance!
V.

[Richard]

Dear @vthevoz

This should set you in the right direction, sorry that i cannot help you completely through the process. You will see what's happening here though and what to do further:

https://laytheme.com/documentation/custom-css-styling.html

https://laytheme.com/documentation/custom-javascript.html

---

Gridder Setup:

Important to note that you should make use of Lay Theme's built in captions as this should be much easier than adding HTML text areas under the images.

The Image element should be given either a Custom Class or ID so we can target it easier:

---

Custom CSS:

.magic-caption .caption{
    display:none;
}

.caption-visible{
    display:block !important;
}

JQuery:

<script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        
        jQuery(".magic-caption").click(function(){
        jQuery(".caption").toggleClass("caption-visible");
        });

    });
</script>

Reference:

https://www.w3schools.com/jquery/html_toggleclass.asp

---

Result:

The Class caption-visible is added to the caption. This comes with new CSS information that tells this HTML element now to be visible.

NOTE: you will see that the caption height created by becoming visible also affects the image to it's right horizontally. Both are pushed upwards. This is something to figure out 🌝

---

Hope this sets you in the right direction & best wishes

Richard