Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 28, 2016 at 10:36 am #705228
    SandraMarino

    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

    October 29, 2016 at 9:56 pm #705686
    Nikko

    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

    February 12, 2017 at 5:17 pm #745976
    SandraMarino

    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

    February 12, 2017 at 8:31 pm #746023
    Basilis

    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

    February 25, 2017 at 7:46 pm #751814
    SandraMarino

    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

    February 25, 2017 at 9:18 pm #751832
    Mike

    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

    February 26, 2017 at 11:51 am #751917
    SandraMarino

    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;
    }

    February 26, 2017 at 4:28 pm #751962
    Mike

    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

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