Show another div when image is hovered over

Question

so I'm trying to do a "cast" section for one of my assignments and I want the actor's character to appear when the actor is hovered over. How would I achieve this? When hiding the display of the deadpool div, it leaves a big gap in the page. I want this to not show until Ryan Reynolds is hovered over.

 article { display: flex; flex-wrap: wrap; margin: auto; padding-top: 12px; padding-bottom: 12px; background-color: #8b2323; width: 48vw; min-height: 200px; min-width: 391px; font-family: verdana, sans-serif; justify-content: center; } .castcontainer { flex-wrap: wrap; min-width: 215px; width: 20%; height: 30%; overflow: hidden; padding: 5px; } #cast { border-radius: 50%; width: 100%; } .cast2 { display: none; text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } .cast:hover+.cast2 { display: block; } .cast { text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } p { background: white; } 

 <article> <div class="castcontainer"> <div class="cast"> <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast"> <p><b>Ryan Reynalds</b></p> </div> </div> <div class="castcontainer"> <div class="cast2"> <img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast"> <p><b>Wade Wilson</b></p> </div> </div> </article> 

Answer 1

Let me offer a more radical departure from your current code:

 .cast * { box-sizing: border-box; } .cast { border-radius: 10px; background: #8b2323; font-family: Verdana, sans-serif; text-align: center; padding: 12px; } .cast img { border-radius: 50%; max-height: 300px; } .cast strong { background: white; display: block; border-radius: 10px; margin-top: 5px; } .cast .actor, .cast .role { width: 100%; } .cast .actor { display: block; z-index: 2; } .cast .role { display: none; z-index: 1; } .cast:hover .actor { display: none; } .cast:hover .role { display: block; } 

 <article class="cast"> <div class="actor"> <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg"> <strong>Ryan Reynalds</strong> </div> <div class="role"> <img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg"> <strong>Wade Wilson</strong> </div> </article> 

This reduces the number of child elements and (in my opinion) makes selecting which element to show/hide that much easier. You're targeting the :hover event of the parent wrapper and instead of trying to use an ID (which cannot be reused) you're targeting .actor and .role .

One concern would be to make sure that the images for each were the same dimension, otherwise on change you could get some transition that was unappealing if the box had to resize.

Answer 2

Might this be what you're looking to do? Added:

article:hover .cast {
  display: none;
}

article:hover .cast2 {
  display: block;
}

 article { display: flex; flex-wrap: wrap; margin: auto; padding-top: 12px; padding-bottom: 12px; background-color: #8b2323; width: 48vw; min-height: 200px; min-width: 391px; font-family: verdana, sans-serif; justify-content: center; } article:hover .cast { display: none; } article:hover .cast2 { display: block; } .castcontainer { flex-wrap: wrap; min-width: 215px; width: 20%; height: 30%; overflow: hidden; padding: 5px; } #cast { border-radius: 50%; width: 100%; } .cast2 { display: none; text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } .cast:hover+.cast2 { display: block; } .cast { text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } p { background: white; } 

 <article> <div id="one" class="castcontainer"> <div class="cast"> <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast"> <p><b>Ryan Reynalds</b></p> </div> </div> <div id="two"class="castcontainer"> <div class="cast2"> <img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast"> <p><b>Wade Wilson</b></p> </div> </div> </article> 

Answer 3

<article>

  <div class="castcontainer" id="show1">
    <div class="cast">
      <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="castImg" id="CastImgRef">
      <p><b>Ryan Reynalds</b></p>
    </div>
  </div>

  <div class="castcontainer" id="show2">
    <div class="cast2">
      <img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" class="castImg">
      <p><b>Wade Wilson</b></p>
    </div>
  </div>

</article>

jQuery(function ($) {
    $('#show1').hover(function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg', 'http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg')
        })
        $('#textChange').text('Wade Wilson');
    }, function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg', 'https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg')
        })
        $('#textChange').text('Ryan Reynalds');
    })
})

Add thisjquery and it will work fine

https://jsfiddle.net/dLwxm2ox/8/

Answer 4

 article { display: flex; flex-wrap: wrap; margin: auto; padding-top: 12px; padding-bottom: 12px; background-color: #8b2323; width: 48vw; min-height: 200px; min-width: 391px; font-family: verdana, sans-serif; justify-content: center; } article:hover .cast { display: none; } article:hover .cast2 { display: block; } .castcontainer { flex-wrap: wrap; min-width: 215px; width: 20%; height: 30%; overflow: hidden; padding: 5px; } #cast { border-radius: 50%; width: 100%; } .cast2 { display: none; text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } .cast:hover+.cast2 { display: block; } .cast { text-align: center; background-color: #8b1a1a; border-radius: 10px; padding: 10px; } p { background: white; } 

 <article> <div id="one" class="castcontainer cast"> <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast"> <p><b>Ryan Reynalds</b></p> </div> <div id="two"class="castcontainer cast2"> <img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast"> <p><b>Wade Wilson</b></p> </div> </article> 

The inner div seems to be unnecessary where class="cast" and class="cast2". Remove the div's and add the class to its parent.