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
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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">
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
    .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;
    <div class="card"></div>


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

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



Edited by oli_drone
Link to comment

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.