clafond17 Posted April 19, 2022 Share Posted April 19, 2022 Site URL: https://www.codylafond.com/ Using the code below I was able to change the hover state of the grid items to display a custom photo /* Change image displayed on hover on project grid */ #grid .item.hovering .wrapper { background-image: url(https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg); background-size: cover; background-position: center center; } However I'm hoping to target each grid item individually and have a unique photo display for each. Any tips on how to go about it? Thanks! Link to comment
Solution tuanphan Posted April 22, 2022 Solution Share Posted April 22, 2022 It looks like you solved with this code #grid .item.hovering .wrapper { background-size: cover; background-position: center center } #grid a[href="/reidsresidentialroofing/"]:hover .wrapper { background-image: url(https://cdn.pixabay.com/photo/2021/07/09/06/57/lavender-6398425__480.jpg) } #grid a[href="/great-spirit-vodka/"]:hover .wrapper { background-image: url(https://cdn.pixabay.com/photo/2017/03/01/05/13/table-setting-2107600__340.jpg) } #grid a[href="/cancerbrightpaper/"]:hover .wrapper { background-image: url(https://cdn.pixabay.com/photo/2018/04/01/17/54/eggs-3281585__340.jpg) } Replace pixabay with new urls Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment