Jump to content

How to Change class / (image change on hover css not working properly)

Recommended Posts

I am trying to get a change image on hover which I have successfully done, but when I then add another image, it changes the images to the first blocks images. Even though the URL's are different. Some research has shown that I may need to change the class/ID's but no idea how to do this. This is the code I am using 

 


<center>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CS</title>

<style type="text/css">
   .card {
       width: 375px;
       height: 350x;
       background: url("https://images.squarespace-cdn.com/content/v1/551ecefbe4b08b18b56e5701/1606340837792-FSLLORGW05SJJ8YIVUFN/ke17ZwdGBToddI8pDm48kCMWMBFcqQftRz-JqZZoIB5Zw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVFI99ncPZu898P4WAmVYNBp8mgB1qWbp5RirnU_Xvq-XCb8BodarTVrzIWCp72ioWw/Untitled+design+%287%29.png?format=500w") no-repeat;
       margin: 30px;
   }
   .card:hover {
       background: url("https://images.squarespace-cdn.com/content/v1/551ecefbe4b08b18b56e5701/1606340808469-EODV0QGQMCXLE4WCPIL8/ke17ZwdGBToddI8pDm48kCMWMBFcqQftRz-JqZZoIB5Zw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVFI99ncPZu898P4WAmVYNBp8mgB1qWbp5RirnU_Xvq-XCb8BodarTVrzIWCp72ioWw/Jess+Bowen.png?format=500w") no-repeat;
   }
</style>
</head>
<body>
   <div class="card" ></div>
</body>
</html>

Edited by zigzag
typo
Link to comment
  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.