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>

Over hover add style display Block and when not hovering add attribute display none may be that will work — nikunjM, Nov 13 '17 at 20:14
That's already in the code that I have in the snippet but it does nothing :( — Zane, Nov 13 '17 at 20:16
Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) or [one of these](https://stackoverflow.com/search?q=show+image+on+hover+div) all found by simply searching SO. — Rob, Nov 13 '17 at 20:52
I've had a look through a few of those and none of them really seem to apply to what I'm trying to do, or at least I'm not understanding them well enough. I want to replace a div containing and image and text, on hover with another div in the same style with different image and text, without having a big gap on my page because the div is still hidden lol. — Zane, Nov 13 '17 at 21:18

score 1 · Answer 1 · answered Nov 13 '17 at 20:36

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.

This seems to solve my problem, but how would this code react to the other cast members being added? I have 8 cast members to do this for, I only included 1 to simplify things on here — Zane, Nov 13 '17 at 20:41
In my example `
` would be repeated for each class/role. Obviously you would need to incorporate your flex grid as needed, and likely make use of a parent wrapper (perhaps a `
` if you are so inclined). — Robert, Nov 13 '17 at 20:44

score 0 · Answer 2 · answered Nov 13 '17 at 20:18

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>

That's making progress, but I want the deadpool div to appear in the same place as ryan — Zane, Nov 13 '17 at 20:21

nikunjM · Answer 3 · 2017-11-13T20:39:38.313

<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/

Getting even closer, but how do you also change it so that the text also changes? So it would go from Ryan Reynolds (typo in example) to Wade Wilson? Appreciate the help so far though! — Zane, Nov 13 '17 at 20:30
@Zane Check updated ans and if you think this is ans vote up and mark this as ans Thank you — nikunjM, Nov 13 '17 at 20:40
It works on the JSfiddle but even when i delete all of the other code i have and replace it with the fiddle, nothing happens. I've got the jQuery in — Zane, Nov 13 '17 at 21:10

score 0 · Answer 4 · answered Nov 13 '17 at 20:44

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.

Show another div when image is hovered over

4 Answers4