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
-
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
-
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024