Dear Amélie @ameliedlt

I have replied to your post on a previous Thread:

http://laythemeforum.com:4567/topic/587/link-carousel-images/8

Does this help? 🌝

Talk soon & have a wonderful day Amélie ✨ Richard

No worries @Garrod have a great day & thank you for supporting Lay Theme!! 🌝

Thank you Ben! @doorofperception

I will be sure to make note of this! 🌝

Best wishes & have a wonderful day Richard

You got mail!

Dear @ErEs

Great :) Thank you for updating

Best
Richard

Thank you for the update @Sophie1000 ! 🌝

Here you go!

Put this in your custom js:

<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery.fn.swinger = function () { return this.each(function () { var $container = jQuery(this); $container.css({ "position": "relative" }); var $images = $container.find("img"); $images.css({ "position": "absolute", "top": "0%", "left": "0%", "width": "100%" }); var $middleImage = jQuery($images[Math.floor($images.length / 2)]); $middleImage.css({ "z-index": "2", "position": "relative" }); var columnsCount = $images.length; $images.each((i, img) => { var left = `${100 / columnsCount * i}%`; var width = `${100 / columnsCount}%`; var $column = jQuery(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`); jQuery(img).after($column); $column.hover(() => { $images.css({ "z-index": "1", "position": "absolute" }); jQuery(img).css({ "z-index": "2", "position": "relative" }); }); }) }); } }); </script> <script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery(".img-area").swinger(); }); </script>

Then add your images via "+More" > +HTML" in your laygridder. Give the row the class "img-area". Should work like this.

Awesome @DasBlitz @kalamakumaran Thanks for using the 3rd party developers section, Good Luck! :)

@Richard maybe you can give me a clue for this issue?

Dear @Iman-Whitfield

If it helps you, here is the tooltip.js in your example for you:

function initTooltip() { const tooltips = Array.from(document.querySelectorAll('[data-tooltip-container]')); tooltips.map(tooltip => { tooltip.addEventListener('mouseover', handleMouseOver); }) function handleMouseOver() { const tooltipbox = createTooltipBox(this); handleMouseMove.tooltipbox = tooltipbox; this.addEventListener('mousemove', handleMouseMove); handleMouseLeave.tooltipbox = tooltipbox; handleMouseLeave.element = this; this.addEventListener('mouseleave', handleMouseLeave); } const handleMouseLeave = { handleEvent() { this.tooltipbox.remove(); this.element.removeEventListener('mousemove', handleMouseMove); this.element.removeEventListener('mouseleave', handleMouseLeave); } } const handleMouseMove = { handleEvent(e) { this.tooltipbox.style.top = e.clientY + 25 + 'px'; this.tooltipbox.style.left = e.clientX + 13 +'px'; } } function createTooltipBox(el) { let tooltip = document.createElement('div'); tooltip.innerText = el.getAttribute('data-tooltip-label'); tooltip.classList.add('tooltip'); document.body.appendChild(tooltip); return tooltip; } } initTooltip();

Creating a box, <div>, that appears when hovering over the Image <img> is a simple step. Here are some links that may help you:

https://www.khanacademy.org/computing/computer-programming/html-css

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

https://www.w3schools.com/howto/howto_css_display_element_hover.asp

However the next step:

You will need the Image Title information which is stored as an Attribute to the Image element

This information will be used to fill the Tooltip with text.
These Links may be of help to you:

https://www.tutorialrepublic.com/faq/how-to-get-the-data-id-attribute-of-an-element-using-jquery.php#:~:text=Answer%3A Use the jQuery attr,attribute of an HTML element.

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

https://css-tricks.com/a-complete-guide-to-data-attributes/

Sorry that i cannot be of more help right now Iman but i hope this aids either you or someone helping :)

Best wishes & thank you for using Lay Theme

Richard

Dear @Phearhead

Wondering if something like this is helpful?
https://stackoverflow.com/questions/25839487/auto-scroll-to-next-anchor-at-mouse-wheel

Best wishes
Richard

Dear @karimus1888

I do not know for certain though i'm sure it it possible. I will have to test with Polylang myself.

Sorry that i cannot be of further help right now :)

Sincerely
Richard

I solved it with Custom CSS.

Thanks for the Answers!

Dear @MickeyB

Apologies for the delay - Happy to help :)

The Background Color of your Grid is currently set to black:

#000000

This can be changed to transparent which will allow users to see the video behind.

This can be done within

Customize > Background > Background Color >

Also your 'Cover' has a white background color set:

#ffffff

If for whatever reason you need CSS Code to force the background color change then please add the following to either

Customize > CSS

Or within

Lay Options > Custom CSS & HTML > Custom CSS

.cover-content { background-color:transparent;} #grid{ background-color:transparent; }

Unsure if you want this as well - On Armin's test, he has a background-color:

.row { background-color: rgba(0,0,0,0.9)!important; }

Making the background almost Opaque similar to Opacity

If i can be of further help Mickey, let me know & have a wonderful day, Thank you for using Lay Theme :)

Best
Richard