Home / Forums / ePix Support / Edit gallery hover elements

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

  • 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

    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);
    }

    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

    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.


    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!

    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.