How to create transparent color overlay appear with some texts on it once you hover over an image

SOLVE
New Contributor

I want to be able to hover over the image and have a transparent color overlay appear with texts on it. is it possible? this is the example of what I meant: 

https://app.hubspot.com/marketplace/30688/products?subType=COS_TEMPLATE_PACK

This is the page I'm working on: 

https://www.3pointproducts.com/test-home-page-3pp-1?hs_preview=CqoQSbJu-12238911903

I want to have the texts and CTAs above the "Products by Category""Products by Condition" images.

It would be very helpful if someone shows me how to!

 

Thank you! 

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Regular Advisor

This is what I added to the CSS above: 

 

.box {
  height: 400px;
  width: 400px;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.box a {
  display: block; 
  background-color: rgba(255, 210, 0, .8); 
  position: absolute; 
  top: 0; 
  left: 0;
  height: 100%; 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  text-decoration: none;
  opacity: 0; 
  visibility: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.box:hover a {
  opacity: 1;
  visibility: visible;  
}
.overlay-content {
  color: #59200F;
  text-decoration: none;
  font-size: 20px;  
}

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
Regular Advisor

For the example I set a fixed width and height which won't be responsive, because it uses a background image you can set the width to 100% instead. 

 

To make your module editable you'll need to add in fields. It takes a bit to explain so I wrote a tutorial here: HubSpot Custom Module Tutorial: Image with Colour Overlay

 

Let me know if you have any questions. 

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
9 Replies 9
Regular Advisor

The link you sent shows all the template packs on the Marketplace instead of a specific one but I believe what you're trying to do is something similar to this.

 

Hover effect - text appears on hover.jpg

 

For that type of effect I'd usually create a custom module using code similar to what appears there: a container with a background image and another container inside that's the same size (I used absolute positioning in this case) and where the opacity and visibility change on hover. 

 

HTML: 

 

<div class="box" style="background-image: url(https://images.unsplash.com/photo-1515094854286-bc6b38a1326f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);" title="Autum">
<a href="www.stephanieogaygarcia.com">
<div class="overlay-content">Hello! 👋</div>
</a>
</div>

CSS: 

.box {
  height: 400px;
  width: 400px;
  position: relative;
background-size: contain;
background-position: center;
background-repeat: no-repeat; } .box a { display: block; background-color: rgba(255, 210, 0, .8); position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; opacity: 0; visibility: none; transition: opacity .2s ease, visibility .2s ease; } .box:hover a { opacity: 1; visibility: visible; } .overlay-content { color: #59200F; text-decoration: none; font-size: 20px; }

Edit: adding in image and code to document it here.

Edit 2: updated CSS


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

New Contributor

Hi 

Thank you very much for the tips. I added a custom module to the template. please live view: https://www.3pointproducts.com/test-home-page-3pp-1?hs_preview=CqoQSbJu-12238911903

The hove over image is below the "Hand, Wrist & Elbow Splints" image. Here are my questions: why the image only shows a portion of the image instead of the whole image, same image url as the other 2 images next to it...

next, the hove image doesn't seem responsive in the mobile view...

Thanks,

 

Y

Reply
0 Upvotes
Regular Advisor

You need to add in the background size (e.g. contain, cover... etc) and possible also the size and whether it repeats. 

 

I'll update the CSS above.

Reply
0 Upvotes
New Contributor

Thanks for the response! 

It would be much easier if you could show me the updated css

Reply
0 Upvotes
Regular Advisor

This is what I added to the CSS above: 

 

.box {
  height: 400px;
  width: 400px;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.box a {
  display: block; 
  background-color: rgba(255, 210, 0, .8); 
  position: absolute; 
  top: 0; 
  left: 0;
  height: 100%; 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  text-decoration: none;
  opacity: 0; 
  visibility: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.box:hover a {
  opacity: 1;
  visibility: visible;  
}
.overlay-content {
  color: #59200F;
  text-decoration: none;
  font-size: 20px;  
}

Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
Highlighted
New Contributor

Thank you! I think I got it...

Reply
0 Upvotes
New Contributor

Hi Stephine,

 

Thank you again for the feedback.  I have been working on the page for a while. and this is the latest progress: https://www.3pointproducts.com/test-home-page-3pp-1-0?hs_preview=pJGbYgcY-17519560519

 

Here are my questions:

1, can you help me to make the hover images responsive in mobile views?

2, I think I did some part wrong in the creation of the custom module building, because the content filed can not be adding or replacing images from the ...

Thanks,

Y

 

Reply
0 Upvotes
Regular Advisor

For the example I set a fixed width and height which won't be responsive, because it uses a background image you can set the width to 100% instead. 

 

To make your module editable you'll need to add in fields. It takes a bit to explain so I wrote a tutorial here: HubSpot Custom Module Tutorial: Image with Colour Overlay

 

Let me know if you have any questions. 

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Reply
0 Upvotes
New Contributor

Thanks! 

Reply
0 Upvotes