ToniMontana
Neues Mitglied
Hallo Leute,
für ein Projekt benutze ich die Hoverbox-Gallery von Nathan Smith. Es klappt auch alles wunderbar, nur möchte ich gerne die letzten drei Bilder zentriert darstellen.
Leider weiß ich nicht, wie ich das realisieren kann. Ich hoffe, ihr habt da Tips für mich.
für ein Projekt benutze ich die Hoverbox-Gallery von Nathan Smith. Es klappt auch alles wunderbar, nur möchte ich gerne die letzten drei Bilder zentriert darstellen.
Leider weiß ich nicht, wie ich das realisieren kann. Ich hoffe, ihr habt da Tips für mich.
HTML:
<div class="grid_6"> <h3>45 Marken - mehr als 600 Modelle</h3><ul class="hoverbox"><li><a href="http://www.alfaromeo.de/cmsde/models/159_sportwagon/pages/159-sportwagon-car-configurator.aspx?outputXml=true&CustomResponse=WebCrawler" target="_blank"><img src="http://www.html.de/images/carbrandsReady/alfaromeo.jpg" alt="Alfa Romeo" /><img src="http://www.html.de/images/carbrandsReady/alfaromeo.jpg" alt="Alfa Romeo" class="preview" /></a></li>
</div>
Code:
/* =Hoverbox Code----------------------------------------------------------------------*/
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}