Display an additional div when the mouse hovers over the image

Question

Display an additional div when the mouse hovers over the image

I'm currently working on a "cast" section for one of my projects, and I'd like the actor's character to be revealed when the actor is hovered over. How can I make this happen without leaving a gap on the page when hiding the display of the deadpool div? Ideally, I want the character to only show up when 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>

html css hover

Answer 1

Answer №1

Here is a fresh take on your existing 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 approach simplifies the structure and optimizes the show/hide functionality by utilizing the parent wrapper's :hover event to target elements with classes instead of specific IDs. This can make managing transitions more efficient without limiting reusability.

It's important to ensure that the images within each element are of consistent dimensions to prevent awkward resizing effects during transitions between elements.

Answer 2

Here is a fresh take on your existing 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 approach simplifies the structure and optimizes the show/hide functionality by utilizing the parent wrapper's :hover event to target elements with classes instead of specific IDs. This can make managing transitions more efficient without limiting reusability.

It's important to ensure that the images within each element are of consistent dimensions to prevent awkward resizing effects during transitions between elements.

Answer 3

Answer №2

Is this the solution you've been searching for? Recently 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 4

Is this the solution you've been searching for? Recently 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 5

Answer №3

<section>

  <div class="performercontainer" id="show1">
    <div class="performer">
      <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="performerImg" id="PerformerImgRef">
      <p><b>Ryan Reynalds</b></p>
    </div>
  </div>

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

</section>

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

Include this jQuery code for smooth functionality.

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

Answer 6

<section>

  <div class="performercontainer" id="show1">
    <div class="performer">
      <img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="performerImg" id="PerformerImgRef">
      <p><b>Ryan Reynalds</b></p>
    </div>
  </div>

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

</section>

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

Include this jQuery code for smooth functionality.

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

Answer 7

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 unnecessary inner div with classes "cast" and "cast2" should be removed and the classes should be added to its parent instead.

Answer 8

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 unnecessary inner div with classes "cast" and "cast2" should be removed and the classes should be added to its parent instead.

Display an additional div when the mouse hovers over the image

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can multiple links be hrefed at the same time?

Displaying images with Javascript when they are clicked

Fill the FILE column with predetermined text

The DOMException occurred when attempting to run the 'querySelector' function on the 'Document' object

Shorten/Alternate coding:

Aligning text at the center using bootstrap

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Bootstrap Card breaking out from the confines of its parent container

Customers can access the order details after completing a Paypal payment

What is the best way to customize the look of the v-calendar component in Vue.js?

What's the name of the auto-triggered dropdown menu feature?

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

MUI component with a stylish gradient border

The opacity behavior of jQuery seems to behave strangely on IE10

What causes the text-align property to function in varying ways across different tags?

Footer to display exclusively on the final printed page's bottom

Can AJAX Delete requests be executed without using jQuery?

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

What is the best way to convert a repetitive string into a reusable function?

Is the original image source revealed when clicked?