How to connect fade effect of two differente elements while mouse is working with one of them

Question

I have an image in the background and a button above it. I want to apply two fade effect: When the mouse is in the button, it's opacity decrease and image opacity should increase. I know to apply the fade effect with only one element, but I don't know how to apply at both of them.

EXAMPLE: See the effects in this link, but they should activate when the mouse is on their title and not on the image while title opacity changes from 1 to 0.3.

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
...
}

.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    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 dissappearing, the image behind me should light up</button>
                        </a>
</div>

Check out [this answer](https://stackoverflow.com/a/4502693/10831896) about how to affect elements when hovering another. — ajmnz, May 02 '20 at 16:40
I've tried it, but I'm new with CSS and HTML and I didn't understand how the answers work. — Uomolepre, May 02 '20 at 16:51

ikiK · Accepted Answer · 2020-05-02T19:22:51.277

I am sure some CSS expert may find solution to this with purely CSS, but for discussion sake here is example of using jquery.

Take note you need to first ad the first state css opacity on image in your CSS to run on first hover. Then you can change states on mouse hover.

You can read about hover effect here: https://api.jquery.com/hover/ And about changing CSS https://api.jquery.com/css/

Hope this helps, I'm sure Baby Yoda is pleased.

$( "#fade" ).hover(
  function() {
  $( "#img" ).css( "opacity", "1" );
  $( "#img" ).css( "transition", "0.3s" );
  }, function() {
      $( "#img" ).css( "opacity", "0.3" );
      $( "#img" ).css( "transition", "0.3s" );
  }
);

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}

.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="domicilio">
                        <img id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
                        <a href="https://www.google.it">
                            <button id="fade">I'm dissappearing, the image behind me should light up</button>
                        </a>
</div>

EDIT:

ON user request pure JS solution.

document.getElementById("fade").onmouseover = function() 
{
    document.getElementById("img").style.opacity = "1";
    document.getElementById("img").style.transition = "0.3s";
}
document.getElementById("fade").onmouseleave = function() 
{
    document.getElementById("img").style.opacity = "0.3";
    document.getElementById("img").style.transition = "0.3s";
}

.domicilio {
    width:10%; 
    text-align:center; 
    padding:5px;
    position: relative;
    margin-left: 7%;
}

.domicilio img {
max-width: 400%;
opacity: 0.3;
transition: 0.3s;
}


.domicilio button{
    position: absolute;
    top: 50%;
    left: 165%;


    
    /*Aspetto*/

    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 id="img"src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
                        <a href="https://www.google.it">
                            <button id="fade">I'm dissappearing, the image behind me should light up</button>
                        </a>
</div>

exist an alternative with javascript? I can't use jquery because this is a project for university — Uomolepre, May 02 '20 at 18:59
@Uomolepre I have added JS solution. If there is a jquery way there is a JS way, one is made out of another. Hope this is not your homework ;) — ikiK, May 02 '20 at 19:23
Thanks, it works. My exams consist in to create a web site. I've decided to create a website for a pub and finally, my home page is complete — Uomolepre, May 03 '20 at 10:23

How to connect fade effect of two differente elements while mouse is working with one of them

1 Answers1