Vvedenie
V osnove etogo sposoba lejit ne fakti4eskoe izmenenie razmera izobrajenia, a izmenenie ego vidimoy oblasti, s pomo6'u svoystva overflow. Eto svoystvo vliaet na otobrajenie soderjimogo, v slu4ae esli eto soderjimoe previ6aet razmeri roditel'skogo konteynera. Esli konteyner imeet ograni4enniy razmer, po toy ili inoy pri4ine, to ispol'zuetsa eto svoystvo 4tobi opredelit', 4to proizoydet. Svoystvo overflow mojet prinimat' sleduu6ie zna4enia: visible, hidden, scroll i auto. V etom primere mi budem ispol'zovat' zna4enie hidden, 4tobi skrit' 4ast' izobrajenia, i visible 4tobi sdelat' etu 4ast' vidimoy pri navedenii ukazatela mi6i.
Koncepcia
Idea zaklu4aetsa v tom, 4tobi razmestit' izobrajenie v opredelennom konteynere. Poskol'ku mi govorim ob izobrajeniax, to v roli takogo konteynera budet vistupat' element . Delaem konteyner blo4nim, ukazivaem neobxodimie razmeri (6irina i visota) i ustanavlivaem otnositel'noe pozicionirovanie. Izobrajenie vnutri konteynera imeet absolutnoe pozicionirovanie i otricatel'nie leviy i verxniy otstupi.
Kod
Etot sposob mojno primenat' kak dla odnogo, tak i dla neskol'kix izobrajeniy.
‹a href="#"><img src="image.jpg" alt="Moe izobrajenie" /></a›CSS svoystva dla opredelenia pozicii izobrajenia vigladat primerno tak:
a{
display:block;
float:left;
width:100px;
height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
a img{
position:absolute;
top:-20px;
left:-50px;
}Esli vi xotite ispol'zovat' izobrajenia raznix razmerov, vi mojete ukazat' otstupi neposredstvenno dla kajdogo izobrajenia:
a img{
position:absolute;
top:-20px;
left:-50px;
}
a#image1 img{
top:-28px;
left:-55px;
}
a#image2 img{
top:-18px;
left:-48px;
}
a#image3 img{
top:-21px;
left:-30px;
}
.
.
.I, nakonec, propisivaem svoystva, 4tobi izobrajenie stalo vidimim pri navedenii mi6i:
a:hover{
overflow:visible;
z-index:1000;
border:none;
}Kak vi zametili dla oboix sostoaniy konteynera ispol'zuetsa svoystvo z-index. www.alexilin.ru/ispolzovanie-z-index/ Eto vajno, poskol'ku pri navedenii ukazatela nam nujno raspolojit' izobrajenie vi6e 4em sosednie izobrajenia. V protivnom slu4ae sposob budet rabotat' ne korrektno.
Pol'zuytes'…
Original: Create Resizing Thumbnails Using Overflow Property
cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
ska4at' isxodniki http://cssglobe.com/lab/overflow_thumbs/overflow_thumbs.zip
