sticky image

Hi,

I would like one image to stay in the centre and not scroll but everything else to, is this possible?

thanks

Hello,

Do you mean sticky image in the product page? There is no option to set the sticky image, there is only option to set a sticky details https://demo.xtemos.com/basel/shop/woman/virror-detail-cape/?productsticky

Best Regards

No I mean a single image i want my logo to be in the middle such as this website https://fearofgod.com/ but no the actual logo just as an image?

Hello,

You can make a sticky image with CSS, however, the menu would not be sticky.

Try this code:

.theblock {
    position: fixed;
    z-index: 11;
    top: 50%;
    left: 50%;
    overflow: visible;
    transition: opacity 0.3s ease-out;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto;
    opacity: 1;
}

.theblock – replace this class with the appropriate one.

Best Regards

That worked perfectly, can i also maybe have the option when you hoover on an image for this to hide?

thanks again

Hello,

Please provide your page URL where you use the block, if your site is under maintenance, provide site admin access.

Best Regards

Hi,

Provided thank you.

Also, i have found this menu on codepen which i have tried by copying the css and paste it to the custom page and the html on the html raw but it doesn’t work it seems it changes the layout of the whole page, could you help with what i am doing wrong please, no as the main menu but part of the page.

https://codepen.io/FUGU22/pen/dzLJJG

Hello,

The provided access is not workable. Please provide page URL and screen of the block which you want to hide on hover.

As for menu, the menu is integrated via functions.php file if you just add HTML code it would not work as you have convinced. Such an issue is not covered by our support.

Best Regards

sorry about that, also is landing page and to apply on all images when hoovering over them like in fearofgod.com

thanks again

Hello,

Please add this code:

/*sticky image*/
.logoimage .vc_figure .vc_box_border_grey > img{
    opacity:1;
    transition:opacity 1s linear;
}
.logoimage .vc_figure .vc_box_border_grey:hover > img {
opacity:0;   
}

Best Regards

Thank you but this is the wrong way around, the image with the writing i dont want to hide when hoovering but the rest of images when hoovering to hide the image with the letters?

Hello,

No, it is not possible to customize with CSS. Unfortunately, there is no quick solution to this.

Best Regards

[Author]

Posts