Jump to content

Image overlay with text on hover

Recommended Posts

Greetings.

I was wondering if I can ask for some feedback. I need to create a product image and then when user is hovering over the image should add some text i.e. product description.

I tried the image block but just the caption is not enough description. Imagine the image for example a square i.e. 2x2 and then hover over the image a gradient background will applied and text over.

here is an example site and instruction but it using java script and static images; I was thinking to use css if possible.

https://www.thequriouseffect.com/fun-tidbits-1

 

Thank you!

AV

Link to comment
  • Replies 28
  • Created
  • Last Reply

Top Posters In This Topic

Hi there!

Here's how I achieved what you are looking for:

First, you will need to add image blocks to a page section and make them all "Poster" designs. Then drag them into rows like you have pictured.

Copy & Paste this code snippet into the Header injection of the relevant page. That should do it!

<style>
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3,
    .sqs-block-content figcaption h2,
    .sqs-block-content figcaption h1,
    .sqs-block-content figcaption h4,
    .sqs-block-content figcaption p {
      color: #000000 !important;
    }
  }
</style>

 

Edited by Caroline_Smith
Link to comment

Thank you s much for the help!

My images are transparent and round in shape; when using the poster feature it ads the square, gray overlay from the beginning. How can I remove that?

I am ok with the square background overlay on hover but I would rather have none initially.

Thank you!

Link to comment

Could you attach a picture or video so that I can see what you mean more clearly?

I don't think I am having the same issue as you described, but I can't tell for sure.

Link to comment

Here is how it looks right now650313644_image1.png.6d61e73954d9b1528105ee3f737f18bc.png

Basically it should show the image with no square / background applied:

1035491343_image2.thumb.png.a36ec5b1fa0c90aba8274565a679793e.png

 

So basically I would like to maintain the image as it is i.e. no background. Then when hover over it is ok to display darker square with text over.

 

 

 

Link to comment

Ahh, I see. That is because all poster images have an image overlay by default. Try this code block instead:

 

<style>
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
    position: relative !important;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3,
    .sqs-block-content figcaption h2,
    .sqs-block-content figcaption h1,
    .sqs-block-content figcaption h4,
    .sqs-block-content figcaption p {
      color: #000000 !important;
    }
  }
</style>

 

Link to comment

I really appreciate it! That worked out excellent.

One more things please - I would like to change the background color on hover over (too dark) is it the line

5 minutes ago, Caroline_Smith said:
background: rgba(0, 0, 0) !important;

that controls that?

What about if I want to change the color of the font? Is that the 

6 minutes ago, Caroline_Smith said:
.sqs-block-content figcaption h3,

section?

Thank you again!

Link to comment
8 minutes ago, av12 said:

I really appreciate it! That worked out excellent.

One more things please - I would like to change the background color on hover over (too dark) is it the line

that controls that?

What about if I want to change the color of the font? Is that the 

section?

Thank you again!

That's correct! You can just use hex color codes if that's easier than rgba. Here is a hex color picker if you don't already know of one. You can also change the opacity rule if it is too dark.

Edited by Caroline_Smith
Link to comment

Here is what I used in order to change the color of text but it still the same:

@media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3 {
      color: #454141 !important;
    },
    .sqs-block-content figcaption h2 {
      color: #454141 !important;
    },
    .sqs-block-content figcaption h1 {
      color: #454141 !important;
    },
    .sqs-block-content figcaption h4 {
      color: #454141 !important;
    },
    .sqs-block-content figcaption p {
      color: #454141 !important;
    }

Can it be that is not one of the tags i.e. H1, H2?

Link to comment

Try removing the commas that are separating the CSS rules. If that doesn't work, just reply with the cull code bock, and I will see what might be causing the issue.

Edited by Caroline_Smith
Link to comment

That also didn't work .....

@media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3 {
      color: #454141 !important;
    }
    .sqs-block-content figcaption h2 {
      color: #454141 !important;
    }
    .sqs-block-content figcaption h1 {
      color: #454141 !important;
    }
    .sqs-block-content figcaption h4 {
      color: #454141 !important;
    }
    .sqs-block-content figcaption p {
      color: #454141 !important;
    }

I'll keep trying - already took too much of your time.

 

Link to comment

It looks like you are missing a closing "}" at the very end of that block. You need a closing tag to close the "@media(max-width: 768px) {" tag. Try this one

<style>
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
    position: relative !important;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
    .sqs-block-content figcaption h3 {
    color: #454141 !important;
    }
    .sqs-block-content figcaption h2 {
    color: #454141 !important;
    }
    .sqs-block-content figcaption h1 {
    color: #454141 !important;
    }
    .sqs-block-content figcaption h4 {
    color: #454141 !important;
    }
    .sqs-block-content figcaption p {
      color: #454141 !important;
    }
  }
</style>

 

Link to comment

It just happened that I didn't paste the last } but it was included in the code. 

So even with the above still didn't work.

I forgot to mention that the template we use is 7.0

3 minutes ago, Caroline_Smith said:
.sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;

I am wondering if it isn't this section though that controls the figcaption display on hover?

 

Link to comment

Possibly. Do you have a link to your site either password protected or published that I can view the solution on?

Link to comment

Oh I think it's because the CSS rules are in the max width section, so they are only being applied on mobile. If you want to change the text color on both mobile and desktop, use this snippet:

 

<style>
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
    position: relative !important;
  }
  .sqs-block-content figcaption h3 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h2 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h1 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h4 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption p {
    color: #454141 !important;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
  }
</style>

 

Edited by Caroline_Smith
Link to comment

That was it! 

Since hover is not a mobile thing do you happen to know how can I hide the text on mobile.

Is it this section that controls it?

8 minutes ago, Caroline_Smith said:
@media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
  }

 

Link to comment

No problem, happy to help! For anyone else reading this, the above code block will not work for image posters with links on the images. Here is alternative code block to accomplish that:

 

<style>
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
    position: relative !important;
  }
  .sqs-block-content figcaption h3 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h2 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h1 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h4 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption p {
    color: #454141 !important;
  }
  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure a:after {
      position: absolute;
      content: "";
      background: rgba(255, 255, 255) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure a:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
  }
</style>

Edited by Caroline_Smith
Link to comment

Caroline thank you - indeed the new code works well when using links.

Can I ask for your help with customizing the poster / image title  and subtitle?

For example I would like to be able to specify a different color for the title, and then a different color and font for the subtitle.

I was able to control overall caption using 

figcaptio p

but I believe that applies to entire text for the image.

Link to comment
7 minutes ago, av12 said:

Caroline thank you - indeed the new code works well when using links.

Can I ask for your help with customizing the poster / image title  and subtitle?

For example I would like to be able to specify a different color for the title, and then a different color and font for the subtitle.

I was able to control overall caption using 

figcaptio p

but I believe that applies to entire text for the image.

To select the subtitle, you will need to use this CSS selector:

.image-subtitle-wrapper p

 

To select the title, use this (use whichever type of header you need - I am just using h3 as an example):

.image-title-wrapper h3

 

You might also need to remove the following CSS rules, since these are meant to make all text the same color:

.sqs-block-content figcaption h3 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h2 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h1 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption h4 {
    color: #454141 !important;
  }
  .sqs-block-content figcaption p {
    color: #454141 !important;
  }

Link to comment

Well if you added the css code to the page header, it will apply to all of the elements with that class name on that page. If you want to make sure that it's only elements in a specific page section, use this code as a template and instead of the header code injection, just paste in the Design > Custom CSS section:

If you need help finding your page section's data-section-id attribute, here is a helpful and quick blog post I've written that includes labeled images.

[data-section-id="{DATA_SECTION_ID_GOES_HERE}"] {
  .sqs-block-image .image-block-outer-wrapper.image-block-v2 .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
    position: relative !important;
  }
  .image-title-wrapper h3 {
    color: #454141 !important;
  }
  .image-subtitle-wrapper p {
    color: #454141 !important;
  }

  /* Appear on Hover */
  @media(min-width: 768px) {
    .sqs-block-content .sqs-block-image-figure a:after {
      position: absolute;
      content: "";
      background: #ffffff !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
    }
    .sqs-block-content figcaption {
      opacity: 0;
      transition: opacity .3s;
    }
    .sqs-block-content:hover .sqs-block-image-figure a:after {
      opacity: 0.5;
      transition: opacity .3s;
    }
    .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
  @media(max-width: 768px) {
    .sqs-block-content figcaption {
      position: relative !important;
      align-items: left !important;
      justify-content: left !important;
      margin-top: 10px;
    }
  }
}

 

Edited by Caroline_Smith
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.