ugrás a tartalomhoz

css transition probléma

kiskivancsi · 2013. Már. 1. (P), 16.01
Ü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:
  1. body {  
  2.     background: url(pix/hatter.png);  
  3.     padding: 0;  
  4.     margin: 0;  
  5.     width: 100%;  
  6.     display: table;  
  7. }  
  8.   
  9. #content {  
  10.     position: relative;  
  11.     width: 6144px;  
  12.     height: 4840px;  
  13.     margin-left: auto;  
  14.     margin-right: auto;  
  15.     text-align: left;  
  16. }  
  17.   
  18. #tb1 {  
  19.     position: absolute;  
  20.     margin-top: 429px;  
  21.     margin-left: 205px;  
  22.     padding: 0px;  
  23. }  
  24. #tb2 {  
  25.     position: absolute;  
  26.     margin-top: 400px;  
  27.     margin-left: 305px;  
  28.     padding: 0px;  
  29. }  
  30.   
  31. a.kep img{  
  32.     display: block;  
  33.     width:100px;  
  34.     height:100px;     
  35.     border:1px solid black;  
  36.     transition: all 1s ease;  
  37.     -webkit-transition: all 1s ease;  
  38.     -o-transition: all 1s ease;  
  39.     -moz-transition: all 1s ease;  
  40.   
  41. a.kep:hover img{  
  42.     width:300px;  
  43.     height:300px;  
  44.     z-index: 2;  
  45.     box-shadow: 0 0 20px #000;  
  46. }  

a html:
  1. <div id="content">  
  2.   
  3. <div id="tb1">  
  4. <a href="pix/ori/1.JPG" class="kep"><img src="pix/tb/1.JPG"></a>  
  5. </div>  
  6.   
  7. <div id="tb2">  
  8. <a href="pix/ori/1.JPG" class="kep"><img src="pix/tb/1.JPG"></a>  
  9. </div>  
  10. </div>  
‹ Ajax a javascript ereje példaprogramok Fix képméret? ›
 ■
1

mégsem teszik Mert nem valid

Poetro · 2013. Már. 1. (P), 16.21
mégsem teszik

Mert nem valid a CSS. Le kellene zárni a a.kep img stílusát.
2

Ohh, basszus, igazad van,

kiskivancsi · 2013. Már. 1. (P), 16.34
Ohh, basszus, igazad van, majd kiüti a szemem, mégsem vettem észre. :(
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?
3

a képek ne csak jobbra és

Poetro · 2013. Már. 1. (P), 16.38
a képek ne csak jobbra és lefelé "nőjenek", hanem fel és le is

Például position vagy margin állításával.
4

Köszi, a margin megoldotta a

kiskivancsi · 2013. Már. 1. (P), 16.54
Köszi, a margin megoldotta a problémát, már csak arra kell rájönnöm, hogyan oldjam meg, hogy az egymásra csúszó képek mindig legfelül legyenek, a z-index nem segített. :s
5

A z-index csak pozicionált

Poetro · 2013. Már. 1. (P), 16.59
A z-index csak pozicionált elem esetén segít. Azaz legalább position: relative kell.
6

Uhh, hát azt nem tudom, hogy

kiskivancsi · 2013. Már. 1. (P), 17.29
Uhh, hát azt nem tudom, hogy lehetne megoldani, anélkül, hogy ne másszon el az egész.
Ha relative-ot használok, a hover miatt megváltozott méret, arrébb löki a többi képet is. :s
7

Mit szeretnél?

Pepita · 2013. Már. 1. (P), 19.44
Vagy arrébb löki, vagy rátakar. Harmadik lehetőség (tudtommal) nincs. Illetve esetleg az, hogy eleve kiszakítasz nekik akkora területet (pl. marginnal), hogy "megnőve" is ugyanakkora helyet foglaljanak. De ennek meg mi értelme?

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.
8

Köszi a tanácsokat, de nem

kiskivancsi · 2013. Már. 1. (P), 20.03
Köszi a tanácsokat, de nem weblapot készítek, így nem is törekszem sem szépségre sem arra, hogy minden kijelzőn tökéletes legyen a végeredmény. Mindössze arról van szó, hogy van egy hatalmas google maps kivágat, és arra próbálok rátenni néhány lekicsinyített fényképet, melyek egy kicsit megnőnek ha ráviszem az egeret. Mindez csak saját magam és barátnőm szórakoztatására. Ehhez próbáltam segítséget kérni.
9

Hely

Pepita · 2013. Már. 1. (P), 20.29
Akkor hagyj nekik elég helyet, vagy ne nőjenek olyan nagyra, hogy rátakarjon. Így a legegyszerűbb.
10

Na végre sikerült a z-indexes

kiskivancsi · 2013. Már. 3. (V), 23.41
Na végre sikerült a z-indexes dolgot is megoldani, jelenleg minden úgy működik ahogy én szeretném, csak egyetlen apró szépséghiba maradt, mégpedig hogy a hover alatt működik a z-index, de amint elviszem onnan az egeret és a képem mérete szépen visszaáll az alappozícióba, de közben vissza is kerül a háttérbe és addig az 1 mp-ig amíg tart a transition újra takarásba kerül. Meg lehet oldani valahogy, hogy ne csak a hover idejére legyen 1 a z-index, hanem egészen addig amíg be nem fejeződik az "animáció"? Próbálkoztam az active-al is, de nem hozott sikert ami talán nem is meglepő.