Closed Image Hover

[Ronan]

I'm struggling with coding in an image hover. My goal is to have the image start out with opacity and grayscale effects, and then when you hover over it, it reveals the true image with fade-in.

I thought it'd be similar to HTML/CSS coding, but the class system is throwing me off. So I'm unsure how I would go about writing in a successful hover command.

Thank you!

 

[Vesuvius]

Something like this? im sorry about the image it's just a random one i dug up i've left the code underneath b/c im not the best explainer but you can definitely ask questions!

[class=blackWhite] width:200px; transition-duration:1s; height:250px; opacity:0.5; filter:grayscale(100%); background-size:cover [/class] [class name=blackWhite state=hover] filter:grayscale(0%); opacity:1 [/class] [div class=blackWhite style=background:url(https://images2.imgbox.com/9c/a4/HK70QwZr_o.jpeg)]

[class=blackWhite] width:200px; flex-grow:1; height:250px; opacity:0.5; filter:grayscale(100%); background-size:cover [/class] [class name=blackWhite state=hover] filter:grayscale(0%); opacity:1 [/class] [div class=blackWhite style=background:url(https://images2.imgbox.com/9c/a4/HK70QwZr_o.jpeg)][/div][/div]

 

[Alteras]

It should be the full notation:

transition: all .5s ease;