Image hover addon set active

[gridch]

Hello!

I would love to achieve that the firt image of my links that are under image hover would be active; I mean always visible.

Is there a way to set an image hover id always visible? Not only when hovering in it.

I will appreciate some help. Thank you! :)

[Richard]

Dear @gridch

This would require you adding a class to the "imagehover region" through custom code.

Sorry if difficult to see but here is the imagehover region holding the image sources in waiting (hidden):

Then on "hover" the class show is added to both the lay-imagehover-region as well as the specific image in the list that relates to the link(text). In this case it being the second:

By making sure that the class show is added permanently the image should stay visible, though i have not tested all this myself. If that doesn't work then you could use jQuery to always "hover" over the text you want:

https://stackoverflow.com/questions/2290829/how-to-force-a-hover-state-with-jquery

---

Hope this helps @gridch & best wishes 🌻

Richard

[gridch]

Hello Richard,

Thank you for your help; I tried to force the image I want to keep permanently shown with the css "display: block;"

This is my image:

.lay-imagehover-region img[data-hoverimageid="652"] {
margin-left:600px;
margin-top: -88px;
display: block;
}

But I don't know how to add a class that makes my image hover stays always visible or shown.

I tried with the code css "display: visible"; but I can't find the solution.

Do you know which could be the css code to achive it?

Thanks in advance,

Best

[Richard]

Dear @gridch

Look into the jQuery "AddClass"

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

You won't need the click function just the addClass:

jQuery("define element").addClass("define class");

Also make sure to wrap any JS Code in a Newpage Event as documented here:

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

---

Best wishes 🌻

Richard

[gridch]

Hello Richard,

Thank you.

I think I need to add the following code to custom CSS & HTML page, in custom <head> content:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
console.log("layoutObj", layoutObj);
console.log("type", type);
console.log("obj", obj);
});
</script>

And below I have to add the following:

jQuery("define element").addClass("show");

My addClass would be: "show" but which would be my element?

Please I will appreciate your help.

[gridch]

This is my website www.griseldaduch.com

I would love to have my image from text "Botanicals" shown permanently.

[gridch]

I didn't f¡nd any solution... Please could you help me out?

Thanks in advance!

[Richard]

Dear @gridch

You could try:

.lay-imagehover-region, img[data-hoverimageid="211"] {
    opacity:1 !important;
}


.row-0{
    z-index:20;
}

The row-0 z-index is needed for to keep your menu in front:

You will see the downside of this method is that to get the image visible we must set the image hover region to 1 opacity & the img itself. This means the last hovered image remains visible. Test to see 🌝

---

Merry Christmas 🎄

Richard

[gridch]

Thank you very much! That worked!

Merry Christmas for you as well. :))

[Richard]

Great to hear all is well @gridch have a wonderful new years and best wishes for 2022! ⭐️

[Simonabele]

Finally I found a website which achieved the effect I was searching for months now. Unfortunately I did not get it working on my own Lay-theme based website. Is there something I am missing.

I try to achieve this effect with hover images centered and fullscreen. In front I have a list of different project links, which should trigger different images.
Would be really looking forward to any help.

https://simonabele.de/en/category/motion-picture/