Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #705228

    Hello

    I would like to make a page and at the end of the texte, I would like to insert a picture hidden it would only appear when the mouse is passing over and disappear when the mouse is not on the picture.
    How can I do it ?

    Thanks for your help

    #705686

    Hey Sandra,

    First you need to enable Custom CSS Class, you can refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ add class for example hidden-image then go to Enfold > General Stying and in Quick CSS add this code:

    .hidden-image img { 
      display: none !important;
    }
    
    .hidden-image img:hover { 
      display: block !important;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #745976

    Hello

    Thank you for you answer, but excuse I don’t really understand all the process
    Ok I have to add a class in Quick CSS (you have given to me the code), but I would like to hide picture on only 4_5 pages, how can I have use it in each page ?

    Thank for your help

    #746023

    Hey!

    If you check the page source, you will se at the tag, each page has it own pageID. Example:
    page-2345

    So, you can convert your code to

    .page-2345 .hidden-image img { 
      display: none !important;
    }
    
    .page-2345 .hidden-image img:hover { 
      display: block !important;
    }

    let us know if you have any more questions

    Best regards,
    Basilis

    #751814

    Thank you Basilis !
    where/how can I check the page source ?

    For example if the name of my picture is test.jpg the code to put in Quick CSS will be

    .page-2345 .test.jpg img {
    display: none !important;
    }

    .page-2345 .test.jpg img:hover {
    display: block !important;
    }

    Thanks for your help

    #751832

    Hi,
    An easy way to check your page source for your page id is to Right Click > View Page Source > Ctrl+F (search) type “page-” and see what highlights. There are also plugins that will show page id next to your posts in the admin area.

    Best regards,
    Mike

    #751917

    Hi

    I’m gonna to test ! thank !
    could you tell me if I have understood the process to hide picture :

    For example if the name of my picture is test.jpg the code to put in Quick CSS will be

    .page-2345 .test.jpg img {
    display: none !important;
    }

    .page-2345 .test.jpg img:hover {
    display: block !important;
    }

    #751962

    Hi,
    Your CSS is not right, Nikko’s post said create a custom class for your image called “hidden-image” don’t use the name of the image “test.jpg”

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.