Claibuco Posted April 4 Share Posted April 4 (edited) Website url: https://www.ascentbuildingco.com/template-projects In the project template I want the hero image of each project (in the grid) to change on hover to a specific interior shot. For example with the Windfall project, on hover it should change from https://images.squarespace-cdn.com/content/v1/5479…194dd7e17bf/91_Ascent+2016+Print.jpg?format=2500w to https://images.squarespace-cdn.com/content/v1/5479fbb6e4b09ed1ced6da1d/3b6169ed-fc81-4b25-aeb7-3ab1c372592e/60_Ascent_2016.jpg Edited April 4 by Claibuco added website, updated image url Link to comment
Claibuco Posted April 4 Author Share Posted April 4 I've added the following code and it pulls in the right image but it is tiling it. I know it has to do with the "format=100w" at the end of the code but i'm not sure which number to change it to so it's full width /* Change image on portfolio item hover */ a.grid-item[href*=windfall]:hover img { visibility: hidden; } .grid-image-inner-wrapper:after { visibility: hidden; } a.grid-item[href*=windfall]:hover .grid-image-inner-wrapper { background-image: url(https://images.squarespace-cdn.com/content/v1/5479fbb6e4b09ed1ced6da1d/3b6169ed-fc81-4b25-aeb7-3ab1c372592e/60_Ascent+2016+Print.jpg?format=100w) !important; } Link to comment
Solution Claibuco Posted April 4 Author Solution Share Posted April 4 Was able to sort it out - here is the code I ended up using //Windfall Portfolio Image Hover// a.grid-item[href*=windfall]:hover img { visibility: hidden; } .grid-image-inner-wrapper:after { visibility: hidden; } a.grid-item[href*=windfall]:hover .grid-image-inner-wrapper { background-image: url(https://images.squarespace-cdn.com/content/v1/5479fbb6e4b09ed1ced6da1d/3b6169ed-fc81-4b25-aeb7-3ab1c372592e/60_Ascent_2016?format) !important; background-size: cover; display: block; } tuanphan and Fig_Design 2 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