I want to create a unique effect with an image in the background and a button above it. When the mouse hovers over the button, I want its opacity to decrease while the image's opacity increases simultaneously. I have experience applying fade effects to individual elements, but I'm unsure how to achieve this dual effect.
For reference, you can see a similar effect in action at this link. In my case, the effect should be triggered when the mouse is on the title, causing its opacity to change from 1 to 0.3 without affecting the image directly.
.domicilio {
width:10%;
text-align:center;
padding:5px;
position: relative;
margin-left: 7%;
}
.domicilio img {
...
}
.domicilio button{
position: absolute;
top: 50%;
left: 165%;
/*Styling*/
font-family: OldEnglish;
background-color: #803c25;
color: #FFC107;
border-color: #FFC107;
font-size: 30px;
padding: 12px 24px;
cursor: pointer;
border-radius: 5px;
}
.domicilio button:hover{
opacity: 0.3;
transition: 0.3s;
}<div class="domicilio">
<img src="...">
<a href="https://www.google.it">
<button>I'm disappearing, the image behind me should light up</button>
</a>
</div>