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
-
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024 -
Jak lze snadno upravovat soubory v PDF?
14. září 2023 -
4 tipy, jak na efektivní úsporu při rozjezdu podnikání
3. ledna 2023 -
inPage AI: Jak na generování obsahu
18. července 2024
Nejnovější
-
AI a internetové podvody
29. října 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Jak se chránit před podvody na internetu – část 2
14. října 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024