CODEWITHSUNDEEP
css
JShepherd
JShepherd

Reputation: 115

:hover displaying a hidden picture

I am having yet another issue with the CSS :hover pseudo-selector. I am trying to get an image to display when you hover over a link but I cannot get it to work.

HTML:

#underTitle {
  white-space: nowrap;
  font-size: 20px;
  color: white;
  padding: 50px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#underTitle a {
  color: #ffffff;
  text-decoration: none;
  transition: 1s;
}

#logovAlign {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#underTitle a:hover+#logovAlign {
  color: #009999;
  opacity: 1;
}
<div class="underTitle" id="underTitle">
  <h2><a href="index.html">Welcome to my Homepage</a></h2>
  <img src="images/faviconp.png" width="50" height="50" alt="Lighting Bolt Logo" id="logovAlign">
</div>

Upvotes: 0

Views: 16

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Remove the h2 tag around anchor tag. The '+' operator works on immediate next sibling only.

See this link for more info https://www.w3schools.com/cssref/sel_element_pluss.asp

Upvotes: 1

Related Questions