Background Image Hover Affect + Text

[walkertron]

Hello,

I have background images now with a shading hover property showing correctly and now would like to add text to be shown only on hover, my current CSS is

#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(255, 255, 255, 0.2);
	content: "";
	display: block;
transition:.3s ease;
transform:translate3d(0,0,0);
opacity:.75;
}

JS

jQuery(".page-id-254 div#x-content-band-1").wrap("<a id='wrap-content-1' href='/our-range/raw-prawns/'></a>");

I have within my Raw Content a custom headline class of text-on-hover-1. Ideally I would like this to show the text on hover with a full colour background.

I have tried modifying the CSS myself but cannot quite achieve what I’m trying to.

Please could someone help with the CSS!

Edit: The link is vf.systematicprint.com/our-range/raw-prawns/

Thank you

[thai]

Hi There,

Please also add this CSS:

.text-on-hover-1 {
    opacity: 0;
    transition: all ease 0.2s;
}
#wrap-content-1:hover .text-on-hover-1 {
    opacity: 1;
}

[walkertron]

Beautiful. Got it in one.

That is great, works as expected.

Thank you very much

[thai]

You’re most welcome