Inês Mier Pelaez Inês Mier Pelaez - 3 years ago 143
CSS Question

Hover over a word and show related image

I want to create a page with a list of words. Whenever hovering over those words, the image related to the word needs to show up. I've read about the hover property and already used it on image-text relation but don't know how to do the opposite. Can somebody show me how?

VXp VXp
Answer Source

You can do it like this:

.red, .green, .blue {
  position: relative;
  text-decoration: underline;
}

img {
  position: absolute;
  left: 0;
  top: 20;
  display: none;
  width: 100px;
  height: 100px;
}

.red:hover > img, 
.green:hover > img,
.blue:hover > img {
  display: block;
}
<p>RGB color values are supported in all browsers.</p>

<p>An RGB color value is specified with: rgb(<span class="red">red<img src="http://www.colorhexa.com/ff0000.png"></span>, <span class="green">green<img src="http://www.colorhexa.com/00ff00.png"></span>, <span class="blue">blue<img src="http://www.colorhexa.com/0000ff.png"></span>).</p>

<p>Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.</p>

Hover over three underlined words.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download