Public Ticket #2167137
add hover effects to images


  • Isabel Lambourne started the conversation


    Please could you advise me how I could add a hover effect to images in my jetpack gallery? I can see there is a field to enter additional css class for images individually, 

    I would like to add a semi transparent layer of colour over the image when you roll over it with the mouse. Is it possible, you could give me an example of the code to do this? I could then take it, customises it, and add it to each image. So that they all have a different shade of the same 2 colours as a semi transparent overlay.

    I tried installing various plugins but then uninstalled them as they didn't work with the theme and I didn't want to lose the basic jetpack gallery and layouts which work well with the Weta theme.

    That is why I thought of doing this as CSS to be stored as a customisation for each image. 

    Best regards,


  •  955
    Marc replied

    Hi Isabel,

    please understand that we cannot provide support for individual customizations.

    Using a custom additional CSS class (for example "shade") and code like the following should work:

    .shade {
        position: relative;
    .shade:hover:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(255,0,0,0.5);