Global Moderators

Dear Allie

@allie-heesh

To be honest i don't quite know 🌝
This would take a deeper dive into custom coding

---

Sincerely

Richard

Dear @Bottexelsensohn

Sorry for the past comment, i lost my marbles a bit 🌝

Chrome: The problem is that the first caption of the carousel is displayed well at the bottom when you arrive on the site, but the captions are no longer displayed when you go down.

However, when I customize the smartphone version from my computer, everything displays well in the simulation.

Safari: the browser copies the 100vh function on the first slider, but when you go down, the site navigation hides and lets the image appear below.

There is also the same problem as on Safari. The first caption is displayed, but when you go down the site, the captions are no longer displayed, or are hidden by the browser bar at the bottom.

I am testing on Iphone 13 & 11 but maybe i need to go older, trying to recreate the Bug:

Once again sorry @Bottexelsensohn if i am off the mark and need re-directing 🌻

---

Best

Richard

Dear Simon

@Simonabele

This will take some custom coding but it's a worthy pursuit & good idea 🌝

The main thing is to understand how the images appear and then mimic that but slightly differently.
There is the lay-imagehover-region. This is the parent container that holds all the images waiting behind the scenes.

The images and the container have an opacity of zero - opacity:0;

When you hover or 'mouseover' a project link the class show is added to the image hover region as well as the image that relates to that link.

You can see this behaviour here:

And now when 'mouseover':

When the class show is added to these elements it comes with new CSS instructions.

This CSS:

.lay-imagehover-region img {
    opacity: 0 !important;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
}

Changes to:

.lay-imagehover-region img.show {
    opacity: 1 !important;
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
}

Notice the opacity change to 1 (invisible to visible) & the class 'show' added to the CSS selections.

So to breakdown - On mouseover add 'show' and when you remove the mouse - remove the class show

For you to achieve your result you need to say:

On mouseover add "show" without the "remove show". 🌝

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

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

https://stackoverflow.com/questions/16821564/how-to-add-remove-class-on-mouseover-mouseout-jquery-hover

Just remember you dont need the removeClass function.

---

Best wishes

Richard

Dear @Markus

Great website ⭐️

I wasnt able to recreate the highlighting issue, but a solution if you wish:

::selection {
  background: transparent; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: transparent; /* Gecko Browsers */
}

This renders the webpage's selection transparent. Because i wasnt able to get the highlighting i dont know if it's a local problem etc 🌝

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

---

Best

Richard

Dear @marc

Interesting, This is surely a Bug but may have lead to a solution? 🌝
I created these tests, the resizing bug occurs with "show multiple slides" the first carousel with and the second without :

https://rickei3.dreamhosters.com/carousel-vimeo-bug/

I have forwarded this Behaviour to Armin as well ✅

Are you able to share your Carousel settings, i think i got pretty close:

If this solution (bug) works for you then we could try some custom CSS to make the vimeo video smaller, let me know.

Thank you for find the bug a well! ⭐️

---

talk soon

Richard

Dear @J199

Great website.

I am able to view this page in both Safari and Chrome:

Is there a specific part that does not work? 🌝

---

Best

Richard

@fabiandraxl

I understand Fabi, Great feedback and has been forwarded 👍

(it may be necessary for the way Wordpress works but will see )

---

Best

Richard

Dear Fabi

@fabiandraxl

Thank you for the confirmation, it is strange that we experience different outcomes 🌝

Please send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

Armin can then have a better look 🔍✅

---

Bet wishes

Richard

Dear @Olek

I have the same behaviour, here with a normal link "link":

The Image chooses the right-hand side of the link but it still has to "stick to it" because that it's setting:

Here again:

This is an interesting one because technically the whole row in the project index is a link and it "sticks" to the start but on the right hand side. I can change it to the left hand side to be sure:

If needed you could use:

.lay-imagehover-region img.lay-image-responsive {
margin-left:30vw;
}

To Push the image to the right:

Note: This will apply to all imagehover regions across your website, you should target the specific page by slug "CSS Based on Current Page" https://laytheme.com/documentation/custom-css-styling.html

Will also forward behaviour to Armin ✅

---

Best wishes

Richard

Dear Sasha

@spontans

This may help you:

show-submenu-mobile is the class for opening the menu items sub-menu and mobile-menu-open is needed for opening the burger menu.

You could force these classes if you wanted 🌝

---

Best

Richard