html - Adding a div containing data around a li on mouseover? -
i have normal li element, contains picture. when hover it, should surrounded div example contains descriptions image in li. please check out link http://www.zalando.de/damenschuhe-sandaletten/ , hover shoes. see, adds information around image.
i tried several things results not want. ideas how to in way?
thanks!
something 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; }
Comments
Post a Comment