Add a watermark image to a summary block image on hover

Site URL: https://journey-to-the-well.squarespace.com/

Hello! I'm trying to add a hover effect to my summary block images. The summary blocks are in the list format and the image is a photographer's watermark that they only want lightly visible upon rollover or hover. I cannot seem to isolate the summary thumbnail to accomplish this.

I have the image loaded in custom CSS, but can't figure out the code to make it appear, then become invisible again. 

Any help would be greatly appreciated! 

background: url("https://static1.squarespace.com/static/6148a095356f78057995cec3/t/615daea6d70e8448d0787da7/1633529514344/logo_circle_png.png")

On 10/28/2021 at 12:49 AM, deannaburks said:

Site URL: https://journey-to-the-well.squarespace.com/

Hello! I'm trying to add a hover effect to my summary block images. The summary blocks are in the list format and the image is a photographer's watermark that they only want lightly visible upon rollover or hover. I cannot seem to isolate the summary thumbnail to accomplish this.

I have the image loaded in custom CSS, but can't figure out the code to make it appear, then become invisible again. 

Any help would be greatly appreciated! 

background: url("https://static1.squarespace.com/static/6148a095356f78057995cec3/t/615daea6d70e8448d0787da7/1633529514344/logo_circle_png.png")

Have you solved it yet? I try hovering your image and the logo appears

@bangank36 it's on the pages under Contemplation rooms. Those images in the summary are pulling from a blog post image. I can't figure out how to add the code to have the same watermark on those images

10 hours ago, deannaburks said:

@bangank36 it's on the pages under Contemplation rooms. Those images in the summary are pulling from a blog post image. I can't figure out how to add the code to have the same watermark on those images

Is it the result you want to achieve?

If it 'your need, you can try adding to Home > Design > Custom Css

.summary-thumbnail-outer-container > a:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 158px;
  height: 160px;
  background: url(https://static1.squarespace.com/static/6148a095356f78057995cec3/t/615daea6d70e8448d0787da7/1633529514344/logo_circle_png.png)
    no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -ms-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Bless you and thank you!! 😃