CMS Development

Yifei
Teilnehmer/-in

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

lösung

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! 

0 Upvotes
2 Akzeptierte Lösungen
Stephanie-OG
Lösung
Autorität

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

lösung

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!

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
Stephanie-OG
Lösung
Autorität

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

lösung

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!

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
9 Antworten
Stephanie-OG
Autorität

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

lösung

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!

Yifei
Teilnehmer/-in

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

lösung

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

0 Upvotes
Stephanie-OG
Autorität

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

lösung

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.

0 Upvotes
Yifei
Teilnehmer/-in

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

lösung

Thanks for the response! 

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

0 Upvotes
Stephanie-OG
Lösung
Autorität

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

lösung

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!

0 Upvotes
Yifei
Teilnehmer/-in

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

lösung

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

 

0 Upvotes
Stephanie-OG
Lösung
Autorität

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

lösung

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!

0 Upvotes
Yifei
Teilnehmer/-in

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

lösung

Thanks! 

0 Upvotes
Yifei
Teilnehmer/-in

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

lösung

Thank you! I think I got it...

0 Upvotes