How to implement the hover effect on an image to be displayed another image over?

Question

This is the html code

<img class="footballinfo" src="FootBallInfo.jpg" alt="FootBallInfo1" width="600" height="400" >
<img class="readmore" src="ReadMore.jpg" alt="readmore1" width="600" height="400" >

This is the CSS code

.footballinfo{
    position: absolute;
    top:230px;
    left: 400px;
}
.readmore{
    position: absolute;
    top:230px;
    left: 400px;
    display: none;
}
.footballinfo:hover .readmore{
    display: inline;
    opacity:0.6;
}

This is the code that I have came up with to do the hover effect. But for some reason it doesn't give the expected output of displaying the other image. Could you spot out the mistake that I have done in one of these lines of code ?

score -1 · Accepted Answer · answered Mar 16 '23 at 17:33

You can not target the element from the neighbour element like your code. These images need to be in the same container, like this:

<div class="container">
  <img class="footballinfo" src="FootBallInfo.jpg" alt="FootBallInfo1" width="600" height="400" >
  <img class="readmore" src="ReadMore.jpg" alt="readmore1" width="600" height="400" >
 </div>

And then you can select the readmore element and style it as you want with this kind of code in css:

.container:hover .readmore {
  // your styles go here
}

How to implement the hover effect on an image to be displayed another image over?

1 Answers1