Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 27, 2017 at 2:19 pm #869571
    tonydobrevski

    Hi,

    I am using the following CSS:

    .avia-image-container-inner {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner:hover {
    box-shadow: 0px 0px 10px #CACDCE;
    }

    However I would like to have the effect with the inner hover only if the image is linked to an URL (only when you can click on the image). Is this possible?
    Thank you in advance!
    Best,
    Anton

    October 29, 2017 at 11:37 pm #870259
    Mike

    Hey tonydobrevski,
    Try:

    .avia-image-container-inner a {
box-shadow: 0px 0px 20px #D9DCDE;
}
.avia-image-container-inner a:hover {
box-shadow: 0px 0px 10px #CACDCE;
}

    Best regards,
    Mike

    October 30, 2017 at 2:15 pm #870465
    tonydobrevski

    Hi Mike,

    This works fine. However, when using this code, it only selects the images with the links. If I use the following code:
    .avia-image-container-inner {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 10px #CACDCE;
    }
    when I go with the mouse over the image, the shadow gets bigger and not smaller. Is there a way to use a code which is only for the images without links? The end goal is to have shadows on all the images and hove effect only on the ones with links. I guess the code will be something like that (but the first part should select only the images without links):
    .avia-image-container-inner {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner a {
    box-shadow: 0px 0px 20px #D9DCDE;
    }
    .avia-image-container-inner a:hover {
    box-shadow: 0px 0px 10px #CACDCE;
    }

    Thank you in advance!
    Best,
    Anton

    November 2, 2017 at 7:30 pm #871813
    Basilis

    Hi,

    Can we see the site with the code live and the exact area you have used it, so we can check the menu on hover effect please?

    Best regards,
    Basilis

    November 2, 2017 at 7:37 pm #871815
    tonydobrevski

    Hi Basilis,

    Yes, you can log in to the site. See how in the private content.

    Best,
    Anton

    November 4, 2017 at 11:41 pm #872633
    Mike

    Hi,
    To use the same effect on images without links try this:

    .avia-image-container-inner img {
box-shadow: 0px 0px 20px #D9DCDE;
}
.avia-image-container-inner img:hover {
box-shadow: 0px 0px 10px #CACDCE;
}

    Best regards,
    Mike

    November 5, 2017 at 5:23 pm #872773
    tonydobrevski

    Hi Mike,

    Thank you very much! Works perfectly! You can close the topic.

    Best,
    Anton

    November 5, 2017 at 6:15 pm #872786
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Image hover effect only when the image is linked to an URL’ is closed to new replies.