CODEWITHSUNDEEP
htmlcsshover
malteser
malteser

Reputation: 485

Trying to make an Image pop up when I hover on a Title

I'm trying to make an image show up when I hover over a title <h1> tag.

This is my CSS so far: 

    .certificate h1{
            text-align:left;
        }

    .certificate:hover, .certificate:hover img{
        visibility:visible;
        z-index:100;
    }

    .certificate img{
        visibility:hidden;
        position:absolute;
    }

Below is my HTML too

<div class="certificate">
    <h1>Title</h1>
</div>
<div class="certificate">
    <img src="./images/image.jpg">
</div>

For some reason my image still desnt show up. Am I checking hover on the right tag?

Upvotes: 0

Views: 46

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Because the hovering .certificate doesn't have the image. Put both of them in the same container. Also, since the only thing in the .container with image has the image with position: absolute, it doesn't give any :hover space. So, technically, you can't hover the image's parent.

.certificate h1 {
  text-align: left;
}
.certificate:hover img {
  visibility: visible;
  z-index: 100;
}
.certificate img {
  visibility: hidden;
  position: absolute;
  left: 100px;
  top: 0;
}
<div class="certificate">
  <h1>Title</h1>
  <img src="http://placehold.it/350x150">
</div>

Upvotes: 3

Related Questions