Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing background image by hovering over specific text block


Question

Site URL: https://www.mcmainsmedia.com/home-1

I am trying to make some custom css code that allows me to change the background image by hovering over a certain text block. On this page (www.mcmainsmedia.com/home-1) when you hover over the text I currently have it set to just disappear. Instead, I would like the background image to change. I would like to be a white color when the user isn't hovering over any text (neutral/default) and then would like it to change to 1 of 4 different backgrounds depending on what text block the user is hovering over. 

 

I am making a larger photography portfolio and would like this to be the portal for my landscapes, concerts, sports, and journalism. So when someone hovers over the word "landscapes" a certain background image will fade in, then when they hover over "concerts" a different one will pop up, then if they move the cursor to the top left of the screen away from text a solid white (or black, don't care too much) appears instead. I would also like the images to have 30-40% overlays on top of them so the text still stands out.

 

I have figured out how to target specific blocks with hovering and I know how to upload a specific image as the background but I do not know how to combine the two so that they work together. 

 

This is a great example of what I am trying to accomplish: https://www.sebastiancox.co.uk/

I love that there is a default background and then the others fade in depending on what word is being hovered over.

 

Thanks!

Link to comment
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

Hi,

You mean this effect?

https://tuanphan.squarespace.com/link-hover-background-change?noredirect

Pass: abc

I added a Blank Section with background Image

Next, add a Text Block with text links

Next, add this code to Page Header (will need to adjust text block id, image url with your site)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const imgs = "https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847937255-KL7YQ0FH2JWUFSKWI0FI/ke17ZwdGBToddI8pDm48kDyrkv0xh0UZB45eZfCeHJZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UYA7hnDto0DZHzMmH7D5yxh0gmfs6GbscUE7FWidc8Cg0PgRfuafvOMwlzZcOCnxVw/20140301_Trade-151_0124-copy.jpg,https://cdn.pixabay.com/photo/2020/11/08/09/41/deer-5723225__340.jpg,https://cdn.pixabay.com/photo/2020/11/01/19/41/autumn-5704791__340.jpg"
$(document).ready(function() {
    if (imgs) $('.section-background img').attr('data-url', imgs)
    const urls = $('.section-background img').attr('data-url').split(',')
    $('.section-background img').attr('src', urls[0])
    $('#block-cc917afadc9c70cdd37c a').each(function(id, e) {
        $(e).hover(function() {
            $('.section-background img').attr('src', urls[id])
        })
    })
})
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

The effect doesnt work tuanphan - on your website atleast. But its the same currently with squarespace equivelant, portfolio pages - the same sort of effect doesnt work here either...atleast not for me. And i've tried firefox, edge, chrome - none display the effect. So im wondering if there's something wrong from SS's side.

Link to comment
  • 0
On 8/3/2022 at 12:36 AM, MrScribble said:

The effect doesnt work tuanphan - on your website atleast. But its the same currently with squarespace equivelant, portfolio pages - the same sort of effect doesnt work here either...atleast not for me. And i've tried firefox, edge, chrome - none display the effect. So im wondering if there's something wrong from SS's side.

Fixed demo. (the server saved code expired)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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