Náhled obrázku
Toto řešení ukazuje, jak jednoduše a zajímavě vytvořit efektivní náhledy obrázků pomocí CSS. Řešení využívá jednoduchého skrývání části obrázku. Jedinou nevýhodou tohoto řešení je složitější příprava vlastního obrázku.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Dan Cederholm. Bližší popis najdete v článku CSS Photo Zoom.
CSS
.zoom a
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: -1000em;
overflow: hidden;
display: block;
width: 125px;
height: 94px;
background: url(„zoom.jpg“) no-repeat top left;
}
.zoom a:hover
{
width: 300px;
height: 225px;
background-position: 0 -104px;
}
.obal
{
width: 600px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
}
XHTML
<html>
<body>
<div class=“obal“>
<div class=“zoom“>
<a href=“zoom.jpg“>Náhled</a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit…
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024