Stránka 1 z 2
Zvětšení obrázku v CSS Vyřešeno
Napsal: 24 bře 2013 14:43
od yela94
Zdravím. Jsem začátečník a dělám si www stránky a napadlo mě že bych přidal jednu maličkost, a to zvětšení 'zoom' obrázku. Představuji si to tak že po najetí kurzoru myši na obrázek se trochu zvětší aby byl lépe vidět. Našel jsem jeden kód ale nefungoval mi, nevíte jak na to? Díky za rady
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 16:05
od honzaik
#obr{
width: 100px;
height: 100px;
}
#obr:hover{
width: 120%;
height: 120%;
}
mělo by to fungovat, 1. je normální přednastavení velikosti obrázku. do toho druhýho (hover) zapíšeš velikosti obrázku v tu chvílí když je na něm myš.
u tohodle je ale meší problém si pamatuji že se zvětší ale jakoby od zhora a zleva. ne z prostředka, na to je
http://www.w3schools.com/css3/css3_2dtransforms.aspscale
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 16:40
od CrazyC0de
No jo, jenže ten tvůj obrázek se bude opakovat do 120%, leda no-repeat..
Ale zkus třeba padding...
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 17:05
od CZechBoY
udělej to přes background size nebo druhej obrázek
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 19:34
od honzaik
a jo, místo procent maj bejt px
padding je u toho zbytečně "komplikovanej", tak před půl rokem sem si s tim hodně hrál a nejlepší je hover + transform-scale
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 21:11
od yela94
honzaik píše:#obr{
width: 100px;
height: 100px;
}
#obr:hover{
width: 120%;
height: 120%;
}
mělo by to fungovat, 1. je normální přednastavení velikosti obrázku. do toho druhýho (hover) zapíšeš velikosti obrázku v tu chvílí když je na něm myš.
u tohodle je ale meší problém si pamatuji že se zvětší ale jakoby od zhora a zleva. ne z prostředka, na to je
http://www.w3schools.com/css3/css3_2dtransforms.aspscale
když mám ten obrázek nahrajen přes html ?
<center><img src="nazev.jpg" width="300px" height="150px">
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 22:07
od CrazyC0de
Přes html to můžeš udělat taky, ale klidě zkus ten padding..
Jo a nevím v čem je ten padding komplikovanej xD, rozhodně to pro ni bude pochopitelnější než skok na scale z CSS3..
Re: Zvětšení obrázku v CSS
Napsal: 24 bře 2013 23:24
od honzaik
no jako nevim jak ten padding myslíš ale při každý změně velikostzi obrázku musíš i upravit padding atd.
a udělej to spíš vše v css, je to jednodušší
Re: Zvětšení obrázku v CSS
Napsal: 25 bře 2013 08:46
od yela94
a musím mít ten obrázek nahranej v boxu přes css nebo jak ? ten tvůj kód mě nefungoval nevím proč .. když dám obrázek do boxu přes css a umístím to přesne přes margin-left a top a pak to nahraju na stránky tak není na tom místě kde má být ..
Re: Zvětšení obrázku v CSS
Napsal: 25 bře 2013 08:53
od honzaik
prostě když budeš mít
Kód: Vybrat vše
<html>
<head>
<style>
#obr{
width: 200px;
height: 100px;
left: 50%;
margin-left: -100px;
}
#obr:hover{
width: 250px;
height: 150px;
margin-left: -125px;
}
</style>
</head>
<body>
<div>
<img src="obr.png" id="obr"/>
</div>
</body>
</html>tak by to mělo fungovat a bejt vycentrovanej
on někdy <center> dělá problémy, už je zastaralej
Re: Zvětšení obrázku v CSS
Napsal: 25 bře 2013 16:50
od CrazyC0de
honzaiku: Mohl by jsi mi vysvětlil v čem je ten padding složitější, nuže tady je kod... a jakými způsoby ten padding můžu myslet.. ?
Kód: Vybrat vše
#obr{width: 200px;height: 200px;background: url('cestakobrazku');}
#obr:hover{padding: 50px;}
Re: Zvětšení obrázku v CSS
Napsal: 25 bře 2013 16:55
od CZechBoY
padding ti nic neudělá, jen roztáhne box => budeš vidět větší část obrázku
udělej to přes ten background-size nebo přes javascript - při kliknutí se otevře "okno" (např. fancybox)