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

Dear @gab The right-click & inspect function of your page is not working so looking at the Code structure isn't possible right now, this page outlines some likely reasons: https://www.auslogics.com/en/articles/fix-right-click-not-working-on-chrome-and-firefox/ I will try my best to set you in the right direction though :) We will be using some of the things outlined within Laytheme's Documentation - specifically targeting a certain page: https://laytheme.com/documentation.html#custom-css-styling Each page has a unique 'slug' which is typically the same as your URL address for the page. So im assuming yours is: .slug-stories With this, CSS applied will only target the 'stories' page. Next we need the Header and Footer's Class or ID. For the header we have the class: .lay-nav & for the Footer we have the ID: #footer-region With this info we can say this: .slug-stories .laynav, #footer-region { display:none; } Saying: -- .slug-stories (stories page) the laynav (navigation) & #footer-region (footer) are to - 'Display:none' The Custom Code above can be inserted into the Custom CSS area of 'Lay options -Custom CSS & HTML' [image: 1614377621436-screen-shot-2020-09-14-at-2.51.54-pm-resized.png] Hope this helps & have a wonderful day :) Richard

Dear Michael @MickeyB Lets do that! :) This may help you as well - referring to Custom CSS based on the landing page: https://laytheme.com/documentation.html#custom-css-styling The following Code will be applied/added to the CSS area within 'Lay Options - Custom CSS & HTML' or using the CSS area located in 'Customize' ( they have the same result ) Your homepage has a 'slug' ( typically the same as your pages URL ) .slug-homepage So we can target this page only and apply css to it. Within this page we want to target both the 'laynav' which is the menu items and also 'navbar' which is the actual 'bar' that separates the Navigation items, so we have our needed elements. Target Homepage then the Laynav and Navbar within: .slug-homepage .laynav, .navbar { display:none !important; } Display:none - straight forward; we tell it not to display and we add the !important to override any CSS that is given naturally from LayTheme ( the CSS that would apply to all other pages etc ). Here is a screenshot of result: [image: 1613710531553-screen-shot-2021-02-19-at-5.55.04-pm-resized.png] Hope this helps Michael and let me know how you go, Have a wonderful day :) Sincerely Richard

Dear Pia @PC Cool, thanks for following up and concluding the thread :) Best of Luck wiht future Projects and thanks for using Lay Theme! Richard

@fratil Tillmann Upvoted, Best of luck with the new website :)

Dear Eva @EvaAnna We can do this! :) to be sure, which part is the logo? top left: "craft" [image: 1602703632090-screen-shot-2020-10-14-at-9.26.12-pm-resized.png] And then we can find out how to target it and you will have control over it then let me know! Sincerely Richard

Dear Felix @FW I hope you find the person you are looking for :) Sincerely Richard