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
-
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Zoner Photo Studio X se mění na Zoner Studio
13. června 2025 -
-
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023
Nejnovější
-
Jaké jsou nejlepší nástroje pro tvorbu webového designu
3. října 2025 -
Rozhovor s vývojářem: „AI mi šetří hodiny práce měsíčně“
30. září 2025 -
.ai: Umělá inteligence a tak trošku ukradená doména
17. září 2025 -
Proč jsou důležité správné údaje o vlastnících domén
11. září 2025