Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 26, 2015 at 3:07 pm #434879
    a00109943

    Hi there!

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

    http://alextomaszewski.com/

    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:

    http://alextomaszewski.com/wp-content/uploads/2015/04/Alex-Tomaszewski-Coming-Soon4.jpg

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

    http://alextomaszewski.com/wp-content/uploads/2015/04/Alex-Tomaszewski-Coming-Soon21.jpg

    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!

    Ben

    April 27, 2015 at 6:41 pm #435512
    Yigit

    Hi Ben

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

    .page-id-389 a.ls-l:hover,.page-id-389 a.ls-l:hover img {
  background-color: blue!important;
}

    Cheers!
    Yigit

    April 28, 2015 at 2:46 pm #436042
    a00109943
    This reply has been marked as private.
    April 28, 2015 at 3:59 pm #436124
    a00109943
    This reply has been marked as private.
    April 29, 2015 at 4:26 pm #436806
    Ismael

    Hi!

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

    Regards,
    Ismael

    April 30, 2015 at 11:54 pm #437852
    a00109943

    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!

    Benjamin

    May 1, 2015 at 12:09 am #437856
    a00109943

    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?

    Thanks!

    May 4, 2015 at 4:08 pm #439006
    Ismael

    Hi!

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

    Cheers!
    Ismael

    May 4, 2015 at 4:53 pm #439070
    a00109943
    This reply has been marked as private.
    May 5, 2015 at 3:57 am #439469
    Ismael

    Hey!

    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: http://alextomaszewski.com/wp-admin/post.php?post=389&action=edit

    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,
    Ismael

    May 5, 2015 at 12:13 pm #439655
    a00109943

    Ismael!

    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!!!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change image upon hover in advanced layer slider’ is closed to new replies.