Home › Forums › Basel support forum › sticky image

sticky image

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 21, 2018 at 11:15 pm #68694

    bruno
    Participant

    Hi,

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

    thanks

    July 22, 2018 at 6:32 am #68698

    Elise Noromit
    Member

    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

    July 23, 2018 at 10:10 am #68821

    bruno
    Participant

    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?

    July 23, 2018 at 12:19 pm #68842

    Elise Noromit
    Member

    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

    July 23, 2018 at 3:21 pm #68867

    bruno
    Participant

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

    thanks again

    July 23, 2018 at 4:00 pm #68871

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    July 31, 2018 at 4:30 pm #70258

    bruno
    Participant

    Hi,

    Provided thank you.

    July 31, 2018 at 4:33 pm #70260

    bruno
    Participant

    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

    July 31, 2018 at 8:43 pm #70276

    Elise Noromit
    Member

    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

    August 1, 2018 at 2:53 pm #70450

    bruno
    Participant

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

    thanks again

    August 1, 2018 at 4:09 pm #70461

    Elise Noromit
    Member

    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

    August 1, 2018 at 4:49 pm #70472

    bruno
    Participant

    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?

    August 1, 2018 at 7:28 pm #70492

    Elise Noromit
    Member

    Hello,

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

    Best Regards

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)