Background Image Hover Effect

[walkertron]

Hello,

I am using Pro and have Raw Content element with a background image. I have successfully linked the background image using JS but would like a hover effect, either lightening the image or using another image.

The ID of the element is #x-content-band-1 and class .x-content-band bg-image and have trawled the forums to find the correct CSS/JS combination to no avail.

Please could you offer a method of achieving the hover effect.

Thank you

[Joao]

Hi There,

Please share your URL so we can take a closer look.

Thank you!

[walkertron]

Hello, thanks it is currently vf.systematicprint.com.

Thanks

[friech]

Hi There,

You can add this on your custom CSS.

.wrap-content-1:hover #x-content-band-1:after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); content: ''; display: block; }

Hope it helps,
Cheers!

[walkertron]

Thank you for this.

This works but then applies to the entire row. Is it possible to limit this affect to individual background images, for example there are 4 columns in a row, and I would like this to apply to the first column background image only? I have already tried adding an ID/Class but this doesn’t appear to work. The other thing is that it bleeds over the edge of the image, so limiting it to the size of the background image would be helpful too.

Thank you

[walkertron]

I have managed to achieve the desired affect using the following CSS

#x-content-band-1 {
    position:relative;
}

#wrap-content-1:hover div#x-content-band-1:before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	content: "";
	display: block;

}

Thank you for sending me along the right lines.

[friech]

Cool, thank you for sharing.

Cheers!