Hello, I'm trying to make the image dark and the text appear when I hover over it. Can anyone help me?
<div class="efeito">
<figure>
<a href="#" target="_blank"><img src="comunica.jpg" ></a>
<figcaption><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></figcaption>
</figure>
</div>
CSS:
.efeito{
-webkit-filter:opacity(100%);
}
.efeito figcaption{
color: #000;
position: absolute;
opacity: 0;
}
.efeito figcaption:hover{
opacity: 1;
}
.efeito img:hover{
-webkit-filter:opacity(0%);
transition: 1s;
}