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
Highlighted
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
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