Show new blog cover image on hover

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!

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?

@bangank36 yes, exactly 🙂

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

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.

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?

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

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);
}

@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? 

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);
}

@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;
}

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;
}}

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!

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?

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

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);
}

@tuanphan Oh amazing, I adjusted the code for the first 3 and that did the trick. I'll work on the rest. THANK YOU!! 😄