Darkened transparent image upon hover of PROMO BANNER

I added this CSS to my global CSS

hovercreative,
.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
border-radius:30px;
}

I refered my PROMO BANNER HOVER IMAGE to hovercreative.css

Am i doing it right?

Hi,

Please attach some screenshots and provide more details as your question is not clear enough.

Thank you in advance.

I want to achieve this

Picture of hover box as follows. Taken off another website

After resizing the images…

Attachments:

You must be logged in to view attached files.

If you want to achieve a darker background after hovering the banner you can check the Color Mask option in Promo Banner element settings (http://prntscr.com/l08ch6)

Regards

There is an issue with this. adding Color Mask option would darken my image even before hover.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.promo-banner .wrapper-content-banner {
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	background-color: rgba(0,0,0,0)
}

.promo-banner:hover .wrapper-content-banner {
	background-color: rgba(0,0,0,.5)
}

Regards

How do I make my text/ content a text that appears upon hover as well. Because now, only my buttons are shown upon hover while the text is static.

Hi,

Please provide the link to your site banners page so we can check it and prepare the custom code for you.

Regards

hi,

sorry for the late reply.

My website is: ideointerior.sg

Please scroll down to the SCANDINAVIAN DESIGNS section

For the words in white, I would like to only show it upon hover.

Thank you.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

.promo-banner .wrapper-content-banner .content-banner {
	opacity: 0;
	visibility: hidden;
	transition: all .25s ease,
	-webkit-transition: all .25s ease;
}

.promo-banner:hover .wrapper-content-banner .content-banner {
	opacity: 1;
	visibility: visible;
}

Regards

[Author]

Posts