0

I created a sample image that has an image title when hovered. I want to have the title to have a background image, inside that is the text, as shown below:

enter image description here

HTML

<div class="footerimages">
<a href="#" target="_blank"  title="Bread" ><img src="http://lorempixel.com/output/food-q-c-300-300-10.jpg" height="300px" width="300px"></a>
    </div>

CSS

.footerimages img {
    width: 30px;
    height: 30px;
}

Sample Fiddle

Sudheer
  • 2,955
  • 2
  • 21
  • 35
MIke
  • 619
  • 6
  • 29

2 Answers2

1

You can't include an image inside a title attribute, but you can use CSS to get the same effect.

EDIT I stand corrected; you can style the title tag with CSS using #div[title]. BUT, the browser still shows the default tooltip.

Let's call your hover image #pop. On hover of your first image, #pop will be displayed at your desired location.

 #pop{
background:red;
width:30px;
height:30px;
display:none;
position:absolute;
top:0;
left:29px;
border:2px solid black;
}
.footerimages img:hover + #pop{
display:block;
}

DEMO

Useful Info: I did a quick search and found a way to emulate the tooltip by using the data attribute.

For example, you would have <a href="#" data-title="Your title here"></a> and style it calling it like so: a[data-title]

See this post Look at the first answer's comments to see what I was talking about.

Community
  • 1
  • 1
JJJ
  • 3,314
  • 4
  • 29
  • 43
0

If the image is holding the pointer down image, then use this:

.footerimages{
    position: absolute;
    top: 100%;
}

Note: Apply the .footerimages 's parent container some position value other than "static".

Mr_Green
  • 40,727
  • 45
  • 159
  • 271