32

I am trying to get a small box to appear on the bottom-left side of an image when a mouse moves over it. Inside the box there will be a link to a different page.

Here is somewhat similar to what I want, but the box to be smaller and not connected to the border of the image.

I've tried everything and can't find an answer. And I don't want to use tooltip, let alone the fact that i have no javascript knowledge whatsoever. I really want this to be CSS.

Also the images I'm trying to work with can be found right here.

alex r
  • 323
  • 1
  • 3
  • 5

4 Answers4

50

This is using the :hover pseudoelement in CSS3.

HTML:

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS:

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

​Demo HERE.

This instead is a way of achieving the same result by using jquery:

HTML:

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS:

#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

jquery code:

$('.hover').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility","hidden");
});

You can put the jquery code where you want, in the body of the HTML page, then you need to include the jquery library in the head like this:

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

You can see the demo HERE.

When you want to use it on your website, just change the <img src /> value and you can add multiple images and captions, just copy the format i used: insert image with class="hover" and p with class="text"

Fabio
  • 2,074
  • 2
  • 24
  • 38
  • Thank you Fabio, this works as well, but the other is simple. I will look into this when I start playing with javascript more :) – alex r Jan 04 '13 at 02:03
  • you are welcome :) javascript is similar to java as you can guess from the name, but simpler. If you want to learn it i recommend you the course that you can find at codecademy.com . It's not a boring one, you have to code while learning. Besides jquery is a javascript framework that lets you code powerful things in a easier way than using pure javascript. The official documentation is well done :) @alexr – Fabio Jan 04 '13 at 22:41
19

Here is one way to do this using css

HTML

<div class="imageWrapper">
    <img src="http://lorempixel.com/300/300/" alt="" />
    <a href="http://google.com" class="cornerLink">Link</a>
</div>​

CSS

.imageWrapper {
    position: relative;
    width: 300px;
    height: 300px;
}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}

Demo

Or if you just want it in the bottom left corner:

Demo

3dgoo
  • 15,716
  • 6
  • 46
  • 58
  • You can use `display: block` and `display: none` rather than opacity if you like. I prefer to have the nice transition though. – 3dgoo Jan 04 '13 at 00:52
  • 1
    yes it's right. It has a nicer effect. I didn't know you can change the properties of another element on hover. I thought only the same. – Fabio Jan 04 '13 at 00:56
  • Thank you so much! I had to play with a bit before I got it working correctly, but this was exactly what I needed!!! Thanks 3dgoo! – alex r Jan 04 '13 at 02:04
6

And if you come from even further in the future you can use the title property on div tags now to provide tooltips:

<div title="Tooltip text">Hover over me</div>

Let's just hope you're not using a browser from the past.

<div title="Tooltip text">Hover over me</div>
Shiraz
  • 2,310
  • 24
  • 26
  • great and elegant solution. Is it normal for there to be a second of delay latency from the time the hover text should appear? There is a bit of a delay – Vass Oct 16 '21 at 17:46
  • 1
    Unfortunately this method relies on the browser to show the tooltip and comes with a delay – Shiraz Oct 22 '21 at 20:26
0

For people coming from the future, you can now do this purely in CSS.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
  margin: 5rem;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
Alex Hughes
  • 99
  • 1
  • 8