Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 6, 2017 at 10:36 pm #773560
    ecoworld76

    Hi,

    Please see the link:

    I would like to show a coloured border for every image on my website when hovering over it (only if the border has been applied to the section). How can I do that?

    Please help.

    April 7, 2017 at 1:43 pm #773962
    ecoworld76

    Further to my original post, I have seen the following website (see the link) which highlights the border upon hovering over or scroll down on mobile. This is the type of feature I am after for my website.

    Thank you.

    April 8, 2017 at 8:19 am #774370
    Rikard

    Hi,

    You can try something like this in Quick CSS to see how you get on with it:

    img:hover {
  border:2px solid green;
}

    Best regards,
    Rikard

    April 8, 2017 at 6:47 pm #774637
    ecoworld76

    Hi Rikard,

    Thanks for that, I have tried it and it works on the images however I just want it to work on the images with the link (as you can see it doesn’t work on the links on the link), but not the other images. I also dont want it to work on the logo area in the hearder.

    Is there any way, I can choose colour for each page or does the colour have to same across whole website? The idea I have is that different border for different depending on the colour scheme of that page.

    Apologies for a long question but I am very new to websites.

    Thanks,

    Kind regards,

    April 9, 2017 at 10:06 am #774855
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-slideshow img:hover, img:hover {
  border:2px solid gold!important;
}

    To target specific page with specific color please use the page id class available in the body tag of the page source before the css class names.

    Example:

    .page-id-xx .avia-slideshow img:hover, .page-id-xx img:hover {
  border:2px solid red!important;
}

    Best regards,
    Vinay

    April 10, 2017 at 12:44 pm #775414
    ecoworld76

    Hi Vinay,

    Thanks for that.

    The page id bit works however the border still doesn’t work properly on the desktop computers. It works on the mobile device.

    It shows border on the images but not the images with the link. It also shows border on the logo in the header which I don’t it to do.

    Please can you help so that the border only applies to the images with the links in the body of the website not in header and footer of the website.

    See below link – Please open it on computer to see it is not working by hover over the images on this page.

    April 11, 2017 at 5:26 am #775781
    Vinay

    Hi,

    To target the images only in content area please use the below CSS this will exclude the logo
    Instead of using border try using the box-shadow it looks and works much better.

    #main .avia-slideshow img:hover, #main img:hover {
  -moz-box-shadow:    inset 0 0 10px gold;
   -webkit-box-shadow: inset 0 0 10px gold;
   box-shadow:         inset 0 0 10px gold;
}

    or

    .page-id-xx #main .avia-slideshow img:hover, .page-id-xx #main img:hover {
  -moz-box-shadow:    inset 0 0 10px gold;
   -webkit-box-shadow: inset 0 0 10px gold;
   box-shadow:         inset 0 0 10px gold;
}

    Best regards,
    Vinay

    • This reply was modified 7 years, 8 months ago by Vinay.
    April 11, 2017 at 4:22 pm #776158
    ecoworld76

    Hi Vinay,

    I tried both code but, it didn’t work at all for me.

    I even used the page id one as well, but still it didnt show any border or shadow.

    Please help!

    Thanks,

    April 11, 2017 at 6:45 pm #776254
    Vinay

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

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