Image overlay with text on hover

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

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>

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!

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.

Here is how it looks right now

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

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.

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>

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!

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.

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?

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.

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.

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>

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?

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

I can - please allow me 1 minute to set that up.

here is the site - https://www.rotrade.com/practice

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>

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

Yes. If you want to hide it, just add "display: none !important;" to that rule.

I appreciate the help!

That worked very well.

Thank you!

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>

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.

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

And will this apply to only this page or to entire site that uses .image-subtitle-wrapper selector?

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