link with fullscreen background image on hover

[danny]

Dear @Richard,

Gisela and me work on this together. Would be amazing if you got back to us about the footer. The footer (=menu) is to small in Chrome but cut in Firefox and Safari. The footer should be completely visible in any desktop screen.

https://groups.uni-paderborn.de/digitale-ausstellung-bildhauerei/

Thanks a lot. Appreciate your help!

Best wishes

Daniel

[Richard]

Dear Daniel

@danny @giselach

The font-size being set to px may be a reason. This is a fixed unit:

https://www.w3schools.com/cssref/css_units.asp

If the screen is only a certain dimension of pixels then the content may well be too big. If you want the text to always remain visible even when the browser is resized you would want to look into Responsive text

https://www.w3schools.com/howto/howto_css_responsive_text.asp

You could use % font sizes, setting this in Text Formats:

---

Hope this helps you and Gisela 🖼

Richard

[giselach]

Hello @Richard thanks for the answer,!!!

although it still does not seem to work. now it's scaling down every time I resize the screen size, yes but in terms of width, not height. any other suggestions??

[Richard]

Dear @giselach

I see 🤔
In text Formats each format has it's on HTML Class that your can see in the title area of the format, e.g HTML Class: _Default

You may want to use the unit vh which is based on viewport height as apposed to vw which is veiwport width:

https://alligator.io/css/viewport-units/#:~:text=vh stands for viewport height,when the viewport is resized.

You could apply this vh unit to your Text format e.g (here targeting the default text format)

._Default{
     font-size:5vh;
}

---

Best wishes

Richard

[giselach]

@Richard said in link with fullscreen background image on hover:

font-size:5vh;

Dear Richard!!!! now it worked! THANKS A BUNCH!!!!!! :-)

[giselach]

@Richard regarding the hovered image, how can I make it appear fullscreen? I know I should go for the same method you've just told me, 100vh and 100vw, but then I guess the image has it's own dimensions so either would appear as "cut" or incomplete. Also every hover image has its own id, is there a way to set a white background for all hovered images ?

so every time I hover an element that has a hover image set, it's background is white.

[Richard]

Dear @giselach

css selectors:
The container that holds the image-hover images:

.lay-imagehover-region 

The images inside the Image hover container:

.lay-imagehover-region img

Example:

.lay-imagehover-region {
     background-color:white;
}

---

"how can I make it appear fullscreen?"

https://www.w3schools.com/howto/howto_css_full_page.asp

---

"is there a way to set a white background for all hovered images ?"

If it was fullscreen would you need the background to be white?

You could target either the container or the images themselves to add background colours:

https://www.w3schools.com/cssref/pr_background-color.asp

---

Best wishes

Richard

[giselach]

@Richard Hello Richard ! thanks for the answer,

but actually that's what I did long ago and seems not to affect the hover image, so, i'm quite stuck there.

Ideally we should just make the .lay-imagehover-region to scale and adapt to the screen size. But it's just not happening. When I tagged .lay-imagehover-region img it just changed it's position, got smaller and couldn't control it anyway ...

[Richard]

Dear @giselach

You can change the dimensions of your Imagehover region within > Lay Options > Imagehover Addon > Widths & Heights :

Settings for a 'row' within the Gridder may also be of interest:

https://laytheme.com/documentation/gridder-rows.html

---

Best wishes 🌝

Richard

[giselach]

Hello Richard, thanks again for your patience. Tough nut to crack… this i know, I actually have it in 100%fand 120% from the beginning, but as it stays for “maximum” it can still go smaller! Any other ideas?

EF17E0F5-59B6-4407-9D9B-23365C7B4853.png