Jump to content

Show new blog cover image on hover

Recommended Posts

Site URL: https://www.thesoulfulentrepreneur.ca/clients

Hello,

I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. 

If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so.

Thanks in advance for your help!

Link to comment
On 10/16/2021 at 12:51 AM, stellaehabib said:

Site URL: https://www.thesoulfulentrepreneur.ca/clients

Hello,

I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. 

If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so.

Thanks in advance for your help!

Is it the result you want to achieve?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
33 minutes ago, stellaehabib said:

@bangank36 yes, exactly 🙂

You can try adding to Home > Design > Custom Css

#collection-5f15f544b6a29379f477ca6f .BlogList-item-image a:hover img {
  display: none;
}
#collection-5f15f544b6a29379f477ca6f .BlogList-item-image a:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1634404101266-49c572abcefa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80');
  opacity: 0.2;
  background-position: center;
}

Change your image url to replace my own image.

Let me know if it works properly in your site

Support me by pressing 👍 if this useful for you

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 6 months later...

Hi @bangank36 - sorry for incredibly prolonged reply. We put that project on pause and I wasn't able to test it out.

We have restarted and decided to change the implementation approach. We are no longer using a blog page. Instead, we simply added each image to a regular page as an image block and linked it to the corresponding portfolio page.

While what you have shared above seems like it should work - for whatever reason, I cannot seem to get the correct ID/class combo to get the 'after' image to appear. 

The updated link to the page is here (pass: soulfullife). 

Thanks in advance for your guidance! I truly appreciate it.

Edited by stellaehabib
fix page url
Link to comment
On 5/14/2022 at 4:21 AM, stellaehabib said:

- sorry for incredibly prolonged reply. We put that project on pause and I wasn't able to test it out.

We have restarted and decided to change the implementation approach. We are no longer using a blog page. Instead, we simply added each image to a regular page as an image block and linked it to the corresponding portfolio page.

While what you have shared above seems like it should work - for whatever reason, I cannot seem to get the correct ID/class combo to get the 'after' image to appear. 

The updated link to the page is here (pass: soulfullife). 

Thanks in advance for your guidance! I truly appreciate it.

You mean for image blocks under Scrolling Block?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
25 minutes ago, stellaehabib said:

Yes, for the image blocks above and below the scrolling block I would like to implement it so that a unique image appears for each image, on hover (the image will be a headshot of the client). 

Try adding this to Design > Custom CSS

/* Images under Scrolling Block */
div#page-section-6229356fbf842170a3f16127 .image-block a {
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}
div#page-section-6229356fbf842170a3f16127 .image-block a {
	transition: all 0.3s;
}
div#block-yui_3_17_2_1_1652463281358_90846:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/12/19/11/flowers-7192179__480.jpg);
}
div#block-yui_3_17_2_1_1652463281358_86740:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg);
}
div#block-yui_3_17_2_1_1652463281358_69349:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/03/10/29/prague-7171444__340.jpg);
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, stellaehabib said:

@tuanphan thank you very much for the reply and suggestion. i applied the code and it works for the first image, but not for the other two examples you added. i double checked the IDs and unless I'm missing something all seems to be ok. any idea as to what might be happening? 

Try this new code

/* Images under Scrolling Block */
div#page-section-6229356fbf842170a3f16127 {
.image-block a {
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}
.image-block a {
	transition: all 0.3s;
}
.image-block:hover img {
    opacity: 0;
}}
div#block-yui_3_17_2_1_1652463281358_90846:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/12/19/11/flowers-7192179__480.jpg);
}
div#block-yui_3_17_2_1_1652463281358_86740:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/07/20/22/flowers-7180947__340.jpg);
}
div#block-yui_3_17_2_1_1652463281358_69349:hover a {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/03/10/29/prague-7171444__340.jpg);
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan yes! that did the trick 🙂 thank you!!

so if I want to apply the same for the section beneath the 'highlighted' clients, is it correct to update the first portion of the code as follows (in addition to customizing the rest of the code for each unique image)?

 

div#page-section-6229356fbf842170a3f16127, div#page-section-627e96382f00f74bc41b4500 {
.image-block a {
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}

 

Link to comment
On 5/16/2022 at 2:07 PM, stellaehabib said:

@tuanphan yes! that did the trick 🙂 thank you!!

so if I want to apply the same for the section beneath the 'highlighted' clients, is it correct to update the first portion of the code as follows (in addition to customizing the rest of the code for each unique image)?

 

div#page-section-6229356fbf842170a3f16127, div#page-section-627e96382f00f74bc41b4500 {
.image-block a {
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}

 

Yes. Add this

div#page-section-6229356fbf842170a3f16127, div#page-section-627e96382f00f74bc41b4500 {
.image-block a {
	    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	transition: all 0.3s;
}
.image-block a {
	transition: all 0.3s;
}
.image-block:hover img {
    opacity: 0;
}}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

Hi @tuanphan - I recently updated this site to the fluid engine and, unfortunately the code no longer works. 

To access the page, the URL is: https://thesoulful.squarespace.com/. Pass: livesoulfully.

I tried to update the section/block IDs but, no luck. 

Example:

section[data-section-id="6329d15529842ea4bc52ac3a"] {
.image-block a {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s;
}
.image-block a {
    transition: all 0.3s;
}
.image-block:hover img {
    opacity: 0;
}}

div#block-6329d1552b4ffbc375724bdf:hover a {
    background-image: url(https://static1.squarespace.com/static/6226283dbb8c047be0806024/t/62c46b18d7ade732c875219b/1658252999585/COVER_portfolio_yaxkin.jpg);
}

Does it have something to do with the image block classes changing on the Fluid Engine? 

Thanks!

Link to comment
On 10/17/2022 at 10:54 PM, stellaehabib said:

Hi @tuanphan - I recently updated this site to the fluid engine and, unfortunately the code no longer works. 

To access the page, the URL is: https://thesoulful.squarespace.com/. Pass: livesoulfully.

I tried to update the section/block IDs but, no luck. 

Example:

section[data-section-id="6329d15529842ea4bc52ac3a"] {
.image-block a {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.3s;
}
.image-block a {
    transition: all 0.3s;
}
.image-block:hover img {
    opacity: 0;
}}

div#block-6329d1552b4ffbc375724bdf:hover a {
    background-image: url(https://static1.squarespace.com/static/6226283dbb8c047be0806024/t/62c46b18d7ade732c875219b/1658252999585/COVER_portfolio_yaxkin.jpg);
}

Does it have something to do with the image block classes changing on the Fluid Engine? 

Thanks!

Yes. With Fluid, you will need to use a different code.

Which image are you referring to?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/20/2022 at 12:49 PM, thesoulfulentrepreneur said:

@tuanphan the images on this page, under the scrolling text. before, on hover, each image would reveal a picture of the client. now, it reveals a blank spot.

Use some code like this (this code for third image)

div#block-6329d15594ec314c5a43ff9a:hover img {
    opacity: 1 !important;
    content: url(https://cdn.pixabay.com/photo/2022/10/16/13/53/early-morning-7525151__480.jpg);
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.