Home Forums ePix Support Edit gallery hover elements

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #83839

    koldoeguren
    Participant

    Hi,

    I want to remove the “link icon” that appears on the grid elements on hover. This is one of the pages of the website I’m building that has a gallery: http://shortfilmparadise.com/genre/

    If it is posible I would also like to ad a semi-transparent layer behind the text so it reads better. (example: http://www.final-tiles-gallery.com/wordpress/examples/basic-gallery/)

    How can I edit those settings?

    Thanks,
    Koldo

    #83853
    Andy
    Andy
    Keymaster

    Hi Koldo,

    It remove it from all Galleries, you can use this bit of CSS – please add it to Appearance > Theme Options > Customize > Custom CSS:

    .gallery-wrap .action-icons {display:none;}

    With regards to the title, it inherits the background color of the “Body” > “Background” in the Customizer. You can override this with a bit of CSS:

    .caption-wrap .title,
    .caption-wrap .content {
    background-color: rgba(255,255,255,0.7);
    }
    #83858

    koldoeguren
    Participant

    Hi,

    Thank you for the quick response.

    Both CSS codes are half-way from what I want. You can check my page (still under construction): http://shortfilmparadise.com/genre/

    – The first one removes the icon (great!) but now the image is not “clickable”. I would like it to link to the corresponding page like it did before adding the custom CSS.

    – The second one creates a background behind the title and text, but doesn’t cover the whole slide like the example I sent you. I would like it to cover the whole image, like here: http://www.final-tiles-gallery.com/wordpress/examples/basic-gallery/

    – One more question. In the galleries, how can I do so the last image is aligned on the left instead of the right?

    Thank you so much for your help!!
    Koldo

    #83876
    Andy
    Andy
    Keymaster

    Ok,

    You can change the first bit of CSS to the following instead – this will allow the image to still be clickable but without the icon.

    .gallery-wrap .action-icons i {display:none;}

    Then remove the previous bit of CSS I gave you and try this ( usually this would be a customization but as we’re half way there I’ll finish it for you ).

    .gallery-wrap a.action-icons {background-color:rgba(255,255,255,0;}
    .gallery-wrap a.action-icons:hover {background-color:rgba(255,255,255,0.8;}

    Unfortunately that’s the way the “Isotope” script renders the page, it can’t be changed without causing issues rendering the rest of the Slides.

    #83889

    koldoeguren
    Participant

    Thank you very much. The second CSS didn’t work for me but I tried a different approach (no background and a shadow in the text) and I liked the result.

    You are the best!

    #83899
    Andy
    Andy
    Keymaster

    You’re welcome, have a nice day 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.