Jump to content

using multiple CSS blocks -

Recommended Posts

hello - new to squarespace and haven't coded since like 2003 and this is very hard for me to put into words, so please bear with me.

my goal is to add css code to create a hover state with images. very simple. when i create the 1st block everything works fine. i add the 2nd css block using the same code structure, update the two image urls for hover states and save. 
every time i add a new block all the previous blocks change to the newest one created even though they are all point to their own .png urls.

this is the code i'm using: https://www.tutorialrepublic.com/codelab.php?topic=faq&file=changing-image-on-hover-with-css

any help would be greatly appreciated!

 

 

 

Screen Shot 2020-03-04 at 2.38.49 PM.png

Link to comment
  • Replies 3
  • Views 2k
  • Created
  • Last Reply
7 hours ago, tuanphan said:

Can you share link to your site? to check your code

hello - im working on this in staging, but the site is dronebase.com if thats helpful.

heres the code im working with:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        width: 432px;
        height: 102px;
        background: url("https://images.squarespace-cdn.com/content/5afa06f5506fbea240a330a7/1583356423440-GJPLOGXJ6HM4O5CWHAEY/ins-off.png?content-type=image%2Fpng") no-repeat;
        margin: 0px;
    }
    .card:hover {
        background: url("https://images.squarespace-cdn.com/content/5afa06f5506fbea240a330a7/1583356585413-YAP8FGEZZVFRDNU1MV6F/ins-on.png?content-type=image%2Fpng") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

 

do i need to assign each block with its div class?

<div class="card" id="yui_3_17_2_1_1583444366596_51285"></div>

 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.