Image hover addon set active
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! :)
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
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
Look into the jQuery "AddClass"
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:
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.
This is my website www.griseldaduch.com
I would love to have my image from text "Botanicals" shown permanently.
I didn't f¡nd any solution... Please could you help me out?
Thanks in advance!
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 🌝
Thank you very much! That worked!
Merry Christmas for you as well. :))
Great to hear all is well @gridch have a wonderful new years and best wishes for 2022! ⭐️
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.