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'

Screen Shot 2020-09-14 at 2.51.54 PM.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:
Screen Shot 2021-02-19 at 5.55.04 PM.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"
Screen Shot 2020-10-14 at 9.26.12 PM.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

Dear @m-czyk

Cool effect :)
Apologies that i cannot be the one to help with your development.

I wish you the best of luck in this thread reaching the person you are looking for.

Sincerely
Richard

Dear @amcd125

Most welcome,
Just hope you come to a solution & this has been helpful :)

Best
Richard

Dear @spontans
ok. I hope it will all work out!

Best!

Marius

Dear @spontans
Thank you for helping!
We appreciate the time people take to make the LayTheme community stronger.
Best!
Marius

Shalom @spontans
great work!
Best!
Marius