ROZWIĄZANE Problem ze stylami - clickshop

Dzień dobry, mam problem ze stylami w clickshopie.

Znam podstawy html i css ale tutaj się wyłożyłem i jestem w kropce.

Stworzyłem moduł na stronie głównej, w którym znajdują się kafle, które ładnie układają się obok siebie i po najechaniu na nie skalują się do 95%. Odpowiedzialny jest za to kod, który wykorzystałem z oryginalnego szablonu clickshopa:

Kod:

#extra_baner .g-row .g-grid-4 {
  margin: 0;
  padding: 0;
  overflow: hidden
}
    
#extra_baner .g-row .g-grid-4 img {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

#extra_baner .g-row .g-grid-4:hover img {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  -ms-transform: scale(0.95);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9, M12=-0, M21=0, M22=0.9);
}

Html modułu przedstawia się następująco:

HTML:

<div class="g-row">
<div class="g-grid-4"><a href="/pl/searchquery/moro/1/phot/5?url=moro" target="_parent"><img src="/public/assets/kafel1.jpg" alt="" width="590" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/DLA-NIEJ/27"><img src="/public/assets/kafel2.jpg" alt="" width="590" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/DLA-NIEGO/28"><img src="/public/assets/kafel3.jpg" alt="" width="590" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/WYPRZEDAZ/37"><img src="/public/assets/kafel4.jpg" alt="" width="295" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/MLODZIEZOWE/29"><img src="/public/assets/kafel5.jpg" alt="" width="295" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/DREWNIANE/30"><img src="/public/assets/kafel6a.jpg" alt="" width="590" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/MLODZIEZOWE/29"><img src="/public/assets/kafel7a.jpg" alt="" width="295" height="295" /></a></div>
<div class="g-grid-4"><a href="/pl/c/MLODZIEZOWE/29"><img src="/public/assets/kafel8.jpg" alt="" width="295" height="295" /></a></div>
</div>

W praktyce wygląda to tak:



Problem pojawia się, gdy dodaję podobny moduł z identycznymi stylami, zmieniam tylko nazwę klasy w kodzie html modułu i css na h-row i h-grid-4:

Kod:

#extra_baner .h-row .h-grid-4 {
  margin: 0;
  padding: 0;
 
  overflow: hidden
}
    
#extra_baner .h-row .h-grid-4 img {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

#extra_baner .h-row .h-grid-4:hover img {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  -ms-transform: scale(0.95);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9, M12=-0, M21=0, M22=0.9);
}

Html modułu:

HTML:

<div class="h-row">
<div class="h-grid-4"><a href="/pl/c/DLA-NIEJ/27"><img src="/public/assets/kafel9.jpg" alt="" width="295" height="200" /></a></div>
<div class="h-grid-4"><a href="/pl/c/DLA-NIEJ/27"><img src="/public/assets/kafel10.jpg" alt="" width="295" height="200" /></a></div>
<div class="h-grid-4"><a href="/pl/c/DLA-NIEJ/27"><img src="/public/assets/kafel11.jpg" alt="" width="295" height="200" /></a></div>
<div class="h-grid-4"><a href="/pl/c/DLA-NIEJ/27"><img src="/public/assets/kafel12.jpg" alt="" width="295" height="200" /></a></div>
</div>

I dzieje się coś takiego:


Kafle mają jakby jakiś padding, którego nie jestem w stanie zidentyfikować, przez który nie mieszczą się w jednej linii i jakby w ogóle nie zasysają stylu bo nic się nie dzieje po najechaniu na nie.

Dziękuję z góry za poświęcony czas

 

Ok, już znalazłem przyczynę - zdublowałem id.
Wątek do zamknięcia/usunięcia.

 

chwila mieszasz wg mnie id (#) z class (.) mieszasz mam na myśli, czy całe klasy są objęte w tym samym id (
#extra_baner) ? jeśli nie to zrób drugi id dla tego i obejmij grafiki nimi.

edit: odpowiedziałem jak jeszcze nie było Twojej odpowiedzi