Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #434879

    Hi there!

    We are using the advanced layer to display a main “coming soon” page.

    We would like the “facebook” and “Lindedin” logos to be clickable. The problem is not inserting the picture and making it a hyperlink, the issue is to “make it obvious” that it is clickable. For example, I want the “facebook” Icon to light up bright blue when I hover over top of the image with my mouse. I believe we would need to insert another “facebook” image that is the same dimension as the other, but different color. I’m assuming int he CSS section we would need to indicate that when the user “hovers” the image, only then will it appear, making it look like an illusion of a button. The below links will show exactly what I am looking to do in a sequence.

    Basically, I want the image to “show itself” when someone hovers over it.

    1. Original landing page looks like this:

    2. Once the browser hovers over the Facebook logo, this is what the logo should become:

    As mentioned above, we would just need the code to “show image” upon hover, or something similar.

    Thank you so much for your help, much appreciated!

    You guys are great!



    Hi Ben

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-389,.page-id-389 img {
      background-color: blue!important;


    This reply has been marked as private.
    This reply has been marked as private.


    Use the layer attribute panel. Edit the IMDB layer, go to the Attributes panel then add a custom css class attribute in the Classes field. Use “imdb-icon” for example. Use the selector in the Quick CSS field:

    .imdb-icon { background-color: blue !important; }



    Hi Ismael,

    I’m sorry but I’m still fairly new with this. Under “attributes” I see the fields “ID” “Classes” “Title” “Alt” and “Rel” I’m assuming I enter “imdb-icon” in the ID field. Then what? Do I need to go somewhere else to define this ID?

    Sorry for being such a noob, :)

    Your help is appreciated!



    I added the code in the functions.php file, I can see the section “Custom CSS” under the “styles” tab next to the Attributes tab. Do I remove the code from the General Styling Quick CSS section and enter this code in the Custom CSS section under Styles for the layer? I’ve tried a few combinations without success. Thank you for the help, also the code listed above has no mention of “hover”. Will it still have the same effect?




    You need to add the css code in the Quick CSS field. If you add the “imdb-icon” in the ID field of the Attributes panel, you need to use this:

    #imdb-icon:hover { background-color: blue !important; }


    This reply has been marked as private.


    OK. On the frontpage, we created a new section with the code block element inside. You can add the icon css modifications inside the code block:

    We modified the hover state of the imdb icon for example, using this code inside the code block element:

    img#imdb-icon:hover {
      background: blue !important;

    You can do the same for the other icons. Add a unique id in the attributes panel then place the css code in the code block.

    Best regards,



    This is brilliant! Thank you so much for putting up with my million questions! This will change the way I design websites! Thanks so much!!!

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Change image upon hover in advanced layer slider’ is closed to new replies.