CMS Development

Yifei
参加者

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

解決

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 いいね!
2件の承認済みベストアンサー
Stephanie-OG
解決策
キーアドバイザー

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

解決

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 いいね!
Stephanie-OG
解決策
キーアドバイザー

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

解決

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 いいね!
9件の返信
Stephanie-OG
キーアドバイザー

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

解決

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
参加者

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

解決

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 いいね!
Stephanie-OG
キーアドバイザー

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

解決

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 いいね!
Yifei
参加者

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

解決

Thanks for the response! 

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

0 いいね!
Stephanie-OG
解決策
キーアドバイザー

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

解決

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 いいね!
Yifei
参加者

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

解決

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 いいね!
Stephanie-OG
解決策
キーアドバイザー

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

解決

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 いいね!
Yifei
参加者

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

解決

Thanks! 

0 いいね!
Yifei
参加者

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

解決

Thank you! I think I got it...

0 いいね!