CSS hover over image and text - css

Question

I have squares with text on a website homepage and I want to add hover effect but dont know which class to choose from my website
www.justtobe.com.au homepage
the first big grid image ( beach photo), I want to add a hover effect similar to this homepage grid
<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div>
<figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg" /></figure>
<span>Hover</span>
</div>
<div>
/* Opacity #2 */
.hover
figure {
background: #1abc9c;
}
.hover12 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 figure:hover img {
opacity: .5;
}
Can someone please help?

Answer 1

There are a couple of things that you have to change if your picture to look the same as the one in the website you mentioned, but if you only want that hover effect then you just need to target the span
.hover12 span {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
cursor:pointer;
}
.hover12 span:hover {
opacity: .5;
display:block;
}
Example: https://jsfiddle.net/fhntLpmz/
Though, if you want it to look like the one in the website you mentioned, you need to change the structure of your html and then your css code.
<h2 id="demo12">12. Opacity #2</h2>
<div class="hover12 column">
<div class="wrapper">
<span>Hover</span>
</div>
<div>
Instead of using img to show the image, I use css to put it as a background, so that the Hover button is inside it.
.wrapper {
background-image:url(https://nxworld.net/example/css-image-hover-effects/pic01.jpg);
background-size:100%;
background-repeat:no-repeat;
width:300px;
height:200px;
}
Other than this, it's just another couple of css. Take this example: https://jsfiddle.net/0shmd21e/1/
There are multiple ways to do this, though. This is just one of them