Adding a div containing data around a li on mouseover? - html

Question

I have a normal li element, it contains a picture. Now when I hover it, it should be surrounded by a div for example which contains some descriptions for the image in the li. Please check out this link http://www.zalando.de/damenschuhe-sandaletten/ and hover the shoes. As you see, it adds information around the image.
I tried several things but the results are not really what I want. Any ideas how to to that in a good way?
Thanks!

Answer 1

Something like this?
<ul>
<li>
<div class="info">Info 1</div>
[Image 1]
</li>
<li>
<div class="info">Info 2</div>
[Image 2]
</li>
<li>
<div class="info">Info 3</div>
[Image 3]
</li>
<li>
<div class="info">Info 4</div>
[Image 4]
</li>
</ul>
ul{
list-style:none;
text-align:center;
padding: 0 35px;
}
li{
display:inline-block;
background: #ddd;
height:200px;
width:200px;
margin:10px;
padding:0;
position:relative;
}
li > .info{
display:none;
position:absolute;
top:0;
left:-40px;
width:35px;
height:100%;
background:#ffa;
}
li:hover{
background:#ccf;
border:5px solid #afa;
margin:5px;
}
li:hover > .info{
display:block;
}
DEMO: http://jsfiddle.net/NhfF3/

Answer 2

you should add a hidden div inside the li element. http://jsfiddle.net/SKxjM/
this is the CSS
.expandable .expansion { display: none; }
.expandable:hover .expansion { display: inline; }
And the HTML should look like this
<ul>
<li class="expandable">this is expandable
<div class="expansion">more info</div>
</ul>

Answer 3

You could try using the CSS :after tag with content.
<li>
<img src="whatever.jpg">
</li>
li:hover:after{
content: 'image caption here';
}
Also, you could dynamically add it, if that makes it work for your site easier:
document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');