Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Different hover for all pages of a portfolio


GHG

Question

Site URL: https://www.guarnizioni-ghirardelli.com/prodotti

Hello all, I'm currently finalising a site ( https://www.guarnizioni-ghirardelli.com/prodotti ) and I am using the Falodu template.

What I'd like to achieve is to have a different hover state for each thumbnail of the portfolio items.
At the moment, all pages have a solid yellow overlay, but I was wondering if somehow it's possible to trigger/have a different overlay (specifically a picture or potentially an SVG) for each page/item of the portfolio grid.

I've attached a screenshot as it might illustrate what I'd like to achieve in a much better way

Thank you in advance 🙂

1583311727_Screenshot2020-10-14at17_39_09.thumb.png.e9908c00f0eafa70049870f588f26449.png

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0

Hi Tuanphan, I'd like to be able to have custom image on hover if it's possible

On 10/16/2020 at 8:53 AM, tuanphan said:

This is possible. I solved for some members.

You want to use custom color or custom image on hover? We can check easier.

 

Link to post
  • 0

Add to Home > Design > Custom CSS. Repeat similar for other items

a.grid-item[href*="guarnizioni-standard"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="guarnizioni-standard"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS. Repeat similar for other items


a.grid-item[href*="guarnizioni-standard"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="guarnizioni-standard"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

 

Oh my sweet lord this is awesome, thank you so much Tuan!

I have loaded the custom files (jpg format as for some bizarre reason I can't load any SVG) and the only issue I have left is the scaling of the picture. I've initially loaded everything with a 16:9 ratio, but, depending on the size of my browser the pictures get tiled.

Link to post
  • 0

All resolved, I just made to match all the loaded jpg to the cover size and stopped the tile/repetition.
Thank you again for your help Tuan 🙂

background-position: center;
background-repeat: no-repeat;
background-size: cover;
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...