CSS hover byte: bild och info
Det är ingen nymodighet att se sidor som har denna lösningen på deras portfolio eller galleri. Att när besökaren hovrar med mus pekaren över en bild, så dyker det upp en liten info ruta som döljer själva bilden.
Dom flesta sidor jag har sett använder dock Javascript för att få det att funka, vilket jag tyckte var onödigt så jag prövade att ta fram en variant som bara använder CSS för visa info rutan över bilden.
Teorin bakom koden
Det hela går ut på att man med CSS placerar info rutan som är en länk ovanför bilden, men gör den bara synlig när man hovrar med mus pekaren.
XHTML koden
<div class="image"> <img src="bilden.jpg" alt="bilden" /> <a href="#" title="Besök sidan" class="more-info"><span> <big>Rubriken</big><br /> <strong>Inlagd:</strong> 21/02 - 09<br /> <strong>Skapare:</strong> En person<br /> </span></a> </div>
Vi börjar med en div (image) för att hålla allt på plats. Sedan bilden som ska visas när man inte håller musen över bilden. Sist men absolut inte minst kommer länken (more-info), med den info som man vill ska visas när man hovrar med mus pekaren.
CSS koden
.image big {
font-family: trebuchet ms, arial,tahoma;
margin: 0 0 5px 0;
font-size:18px;
color:#ffffff;
}
.image strong {
color:#ffffff;
}
.image {
position:relative;
width:200px;
height:130px;
float:left;
padding:2px;
margin: 10px;
background-color:#ffffff;
border: 1px solid #a2a2a2;
font-family: verdana, arial;
font-size:12px;
line-height:1.5em;
}
.image:hover {
border: 1px solid #777777;
}
.image a, .image a:hover {
color: #e0e0e0;
text-decoration:none;
}
.image img {
position:absolute;
z-index:1;
}
.image a.more-info {
position:absolute;
z-index:2;
width:200px;
height:130px;
display:block;
}
.image a.more-info span {
padding:10px;
background: url(overlay.png) no-repeat left top;
width:180px;
height:110px;
display:block;
visibility: hidden;
}
.image a.more-info:hover span {
display:block;
visibility: visible;
cursor:pointer;
}
Koden är ganska självförkarad, men för att länken ska ligga på bilden måste vi ge dom egenskaperna.
- position:absolute;
- z-index:1; / z-index:2;
z-index bestämmer i vilken ordningen elementen ska ligga, elementet med z-index:1; ligger under det med z-index:2; och så vidare.
position: absolute; placerar elementet utan någon tanke på annan html kod, så det låter oss att med z-index att lägga element på varandra.
IE6 fix
Jag vet att IE6 är en utdöd webbläsare och jag stöttar inte dens kvarlevnad, men här kommer ett litet fix som gör att denna funktion funkar i IE6 också.
Tyvärr validerar inte den här koden, om det finns tankar för att fixa det, skriv det i en kommentar.
Lägg bara till den här koden i <head>:
<!--[if IE]>
<style type="text/css">
.image a.more-info { background-color:#ffffff; opacity: 0;filter: alpha(opacity=0); }
.image a.more-info:hover { opacity: 1;filter: alpha(opacity=100); }
</style>
<![endif]-->
PNG fix till IE6
Om du vill använda den halvtransparanta effekten av png bilder måste du använda ett fix för det också. Det kan du läsa om på den här länken:
http://www.twinhelix.com/css/iepngfix/
Testat och funkar med:
Windows XP + firefox 3
Windows XP + IE6
(Har du möjlighet att testa med andra operativsystem/webbläsare, skicka en kommentar)
Demo
1 Kommentarer på 'CSS hover byte: bild och info'
Thomas skrev
Bra förklarat.
Skrivet 19:e Nov 22:47Läser en kurs på Umeå Universitet och tänker göra en lite z-index då hittade jag ditt tips. Bra förklarat. Trevligt litet css tips
//Thomas