Altering hover state of home page grid on Flatiron 7.0. Used custom CSS to show photo on hover but unsure how to apply a unique photo to each project.

clafond17 · April 19, 2022

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!

tuanphan · 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

Altering hover state of home page grid on Flatiron 7.0. Used custom CSS to show photo on hover but unsure how to apply a unique photo to each project.

Recommended Posts

clafond17

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources