css transition probléma
Üdv
Kezdő vagyok, előre is elnézést a valószínűsíthetőleg buta kérdésért, minden bizonnyal pofonegyszerű a megoldás, én mégis itt ülök már rajta órák óta.. :)
Adott tehát egy nagy méretű háttérkép, melyen össze-vissza el vannak helyezve kis képek, melyeknek meg kellene nőniük a :hover segítségével, mégsem teszik.
A style:
a html:
■ Kezdő vagyok, előre is elnézést a valószínűsíthetőleg buta kérdésért, minden bizonnyal pofonegyszerű a megoldás, én mégis itt ülök már rajta órák óta.. :)
Adott tehát egy nagy méretű háttérkép, melyen össze-vissza el vannak helyezve kis képek, melyeknek meg kellene nőniük a :hover segítségével, mégsem teszik.
A style:
body {
background: url(pix/hatter.png);
padding: 0;
margin: 0;
width: 100%;
display: table;
}
#content {
position: relative;
width: 6144px;
height: 4840px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#tb1 {
position: absolute;
margin-top: 429px;
margin-left: 205px;
padding: 0px;
}
#tb2 {
position: absolute;
margin-top: 400px;
margin-left: 305px;
padding: 0px;
}
a.kep img{
display: block;
width:100px;
height:100px;
border:1px solid black;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
a.kep:hover img{
width:300px;
height:300px;
z-index: 2;
box-shadow: 0 0 20px #000;
}
a html:
<div id="content">
<div id="tb1">
<a href="pix/ori/1.JPG" class="kep"><img src="pix/tb/1.JPG"></a>
</div>
<div id="tb2">
<a href="pix/ori/1.JPG" class="kep"><img src="pix/tb/1.JPG"></a>
</div>
</div>
mégsem teszik Mert nem valid
Mert nem valid a CSS. Le kellene zárni a
a.kep img
stílusát.Ohh, basszus, igazad van,
Köszi, hogy felhívtad rá a figyelmem.
Ha már itt vagyok, és megnyitottam ezt a topicot, megkérdezem azt is, hogyan tudnám azt elérni, hogy a képek ne csak jobbra és lefelé "nőjenek", hanem fel és le is, úgy hogy a középpontjuk egy helyben maradjon?
a képek ne csak jobbra és
Például
position
vagymargin
állításával.Köszi, a margin megoldotta a
A z-index csak pozicionált
z-index
csak pozicionált elem esetén segít. Azaz legalábbposition: relative
kell.Uhh, hát azt nem tudom, hogy
Ha relative-ot használok, a hover miatt megváltozott méret, arrébb löki a többi képet is. :s
Mit szeretnél?
Jobban jársz, ha előbb relatív méretezéssel és pozícionálással barátkozol, és csak később játszol abszolúttal, ha már előbbi jól megy. Másképp sokat fogod magad etetni a különböző kijelzőméretekkel... Amit meg nem tudsz megoldani relatívan (és szépen), azt még ne erőltesd.
Köszi a tanácsokat, de nem
Hely
Na végre sikerült a z-indexes