How to show an image in a tool-tip on hovering ove

Question

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

Answer 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

Answer 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>

Answer 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>