I have successfully applied opacity: 1; to a paragraph when hovering over itself. However, I want the opacity to also change when hovering over the header above it.
Here is my CSS code:
.testH {
font-family: impact;
text-align: center;
font-size: 50px;
transition: all 1s;
}
.testP {
text-align: center;
opacity: 0.5;
font-size: 18px;
transition: all 1s;
}
#testHdiv:hover {
opacity: 1;
}
.testP:hover {
opacity: 1;
}
This is how my HTML looks like:
<div id="testHdiv">
<h1 class="testH"><b>< /></b></h1>
<p class="testP">Text goes here...<br>More text goes here.</p>
</div>
I am facing issues with changing the opacity of the paragraphs when hovering over the div container. It seems that applying the opacity property on the hover of the div is not effective because the div is a block element and cannot be transparent.
I have been struggling with this problem for some time now. My goal is to achieve an effect similar to what is seen in this example: , where hovering near the text causes it to become less transparent, focusing on opacity rather than zooming.