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.
