Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 17, 2017 at 1:50 am #865049
    tonydobrevski

    Hi,

    I am using the following code for the shadow box effect:
    .avia-image-container-inner {
    box-shadow: 4px 4px 8px #666666;
    padding: 5px;
    }

    I would like to know how I can make the shadow ‘lighter’ and when hovering with the mouse on the image how can the shadow become smaller?
    Thank you in advance!
    Best,
    Anton

    October 17, 2017 at 2:25 am #865054
    Mike

    Hey tonydobrevski,
    For the shadow to be lighter and smaller on hover use the code:

    .avia-image-container-inner {
box-shadow: 4px 4px 8px #666666;
padding: 5px;
}
.avia-image-container-inner:hover {
box-shadow: 2px 2px 4px #a3a3a3;
padding: 5px;
}

    Note that the first half is your code, the second half is the hover code.

    Best regards,
    Mike

    October 17, 2017 at 11:57 am #865246
    tonydobrevski

    Hi Mike,

    Thank you, works perfectly!

    Best,
    Anton

    October 18, 2017 at 5:30 am #865529
    John Torvik

    Hi,

    You are most welcome!

    Best regards,
    John Torvik

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