How to show an image in a tool-tip on hovering over another image using CSS only?

问题

I've a set of three horizontal images. Now I've to show the tool-tip image for each of these images when user hovers his/her mouse cursor on any othe three images.

The issue is in every tool-tip I want to show an image. I've to achieve this thing through CSS only. No more jQuery and other stuff.

Can someone please help me in this regard please?

Following is the HTML of the set of three horizontal images.

<table style="width:100%" id="thumbs">
                      <tr>
                        <td><span style="cursor:pointer" ><img id="img1" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td> 
                        <td><span style="cursor:pointer" ><img id="img2" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
                        <td><span style="cursor:pointer" ><img id="img3" width="80" height="80" src="http://78.134.51.289/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
                      </tr>
                    </table>

Thanks in advance. You can take any images as tool-tip that are in .png format and having dimensions 273px * 224 px

回答1:

You can achieve that using :after or :before pseudo class elements.

tr span {
    display: block;
    position: relative;
}
tr span:hover {
    z-index: 1;
}
tr td span:hover:after {
    content:"";
    background-image: url('http://lorempixel.com/273/274/animals');
    position: absolute;
    top:50%;
    left: 50%;
    width: 273px;
    height: 274px;
}
tr td + td span:hover:after {
    background-image: url('http://lorempixel.com/273/274/sports');
}
tr td + td + td span:hover:after {
    background-image: url('http://lorempixel.com/273/274/people');
}

Working Fiddle

回答2:

.ImgWithTool {
  position: relative;
  width: 200px;
  height: 200px;
}
.tool {
  display: none;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  text-align: center;
  background: #ddd;
}
.ImgWithTool:hover .tool {
  display: block;
}
.image-icon {
  width: 50px;
  height: 50px;
  background: #ccc;
  display: inline-block;
}
.image-icon:hover {
  background: #eee;
}

<td>
  <div class="ImgWithTool">
    <img id="img1" width="200px" height="200px" alt="your img" src="" />
    <div class="tool">
      <div class="image-icon">tool1</div>
      <div class="image-icon">tool2</div>
    </div>
  </div>
</td>

回答3:

Are you trying to display a tooltip, or are you using this as an image gallery? Either way;

Tooltip:

.image {
  display: inline-block;
  height: 150px;
  width: 200px;
  background: gray;
  position: relative;
  overflow:hidden;

}
.image img {
  height: 100%;
  width: 100%;
}
.image .tooltip {
  position: absolute;
  transform: translate(100%);
  bottom: 0;
  width: 100%;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.8s;
  opacity:0;
}
.image:hover .tooltip {
  position: absolute;
  transform: translate(0);
  opacity:1;
}
.tooltip:hover ~ .this{
  width:300px;
  }

<div class="image">
  <img src="http://placekitten.com/g/300/300" />
  <div class="tooltip">
    i'm a tool tip.
  </div>
</div>

Gallery:

#gallery {
  width: 300px;
  border: 3px solid red;
  text-align: center;
  padding-top: 300px;
  background: url(http://placekitten.com/g/300/300) no-repeat;
  position: relative;
}
#gallery li {
  display: inline;
}
#gallery span img {
  padding: 0 1em;
  transition:all 0.8s;
}
#gallery img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
}
#gallery span:hover {
  background: red;
}
#gallery span:hover ~ img {
  display: inline-block;
}

<ul id="gallery">
  <li>
    <span>Cat 1</span>
    <img src="http://placekitten.com/g/200/200" />
  </li>
  <li>
    <span>Cat 2</span>
    <img src="http://placekitten.com/g/300/200" />
  </li>
  <li>
    <span>Cat 3</span>
    <img src="http://placekitten.com/g/110/100" />
  </li>
  <li>
    <span>Cat 4</span>
    <img src="http://placekitten.com/g/140/100" />
  </li>
</ul>

来源：https://stackoverflow.com/questions/28024758/how-to-show-an-image-in-a-tool-tip-on-hovering-over-another-image-using-css-only