Image Hover Full size with border on site

[gridch]

Hi!

I am trying to set a page with links and image hover on fullsize with a white border on each corner of the site.
I noticed that I can't change the weights and heights on the settings with fullsize,
Can I achieve this with css? I just don't know how to do it.

Would it be fine to add some custom codes just like that for example?

border-right: 10px solid #000;
border-left: 10px solid #000;
border-bottom: 10px solid #000;

I really would appreciate some help.

Many thanks

[arminunruh]

use this

.lay-imagehover-region img{
    top: 10px!important;
    left: 10px!important;
    width: calc( 100% - 20px )!important;
    height: calc( 100vh - 20px )!important;
}

[gridch]

@arminunruh said in Image Hover Full size with border on site:

.lay-imagehover-region img{
top: 10px!important;
left: 10px!important;
width: calc( 100% - 20px )!important;
height: calc( 100vh - 20px )!important;
}

Thanks a lot!! It worked fine! :)))

[gridch]

Hi,

I tried to add some custom css to modify the same code you proviced me but to be applied in the background images in order to have the same white border on the site even in background images (because they fit the whole screen) I need them with border also.

I tried this but doesn't do the job:

.cover-region-desktop .cover-inner {
background-image: url(/wp-content/uploads/2022/07/griseldaduch_architectures_21.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
padding: 10px!important;
}

What I am doing wrong?

Thank you a lot!

[arminunruh]

.cover-region .background-image img{
    top: 10px!important;
    left: 10px!important;
    width: calc( 100% - 20px )!important;
    height: calc( 100vh - 20px )!important;
}

i guess this should work