1Marcel1966
Gebruiker
- Lid geworden
- 20 aug 2018
- Berichten
- 15
Hallo,
Ik heb met bootstrap 3.3.7 2 rijen gemaakt met ieder 4 foto's middels md-col-3.
Nu doen alleen foto 4 en 8 exact wat ze doen, namelijk op elkaar aansluiten zonder enige padding of margin.
Foto 1,2,3,5,6 en 7 doen dit niet. Ik heb de code 3 keer gecontroleerd en drie keer overgeschreven, maar ik zie niet waar de fout zit.
Ik ben nieuw in html, css en bootstrap en ik kan alle hulp gebruiken.
Ik heb een foto geplaatst hoe het er nu uitziet ( of eigenlijk niet uitziet haha )
De HTML code en CSS code heb ik hieronder gezet zodat iemand het kan checken voor mij en mij van een oplossing kan voorzien.
--HTML code:--
Alvast bedankt voor alle hulp.
Ik heb met bootstrap 3.3.7 2 rijen gemaakt met ieder 4 foto's middels md-col-3.
Nu doen alleen foto 4 en 8 exact wat ze doen, namelijk op elkaar aansluiten zonder enige padding of margin.
Foto 1,2,3,5,6 en 7 doen dit niet. Ik heb de code 3 keer gecontroleerd en drie keer overgeschreven, maar ik zie niet waar de fout zit.
Ik ben nieuw in html, css en bootstrap en ik kan alle hulp gebruiken.
Ik heb een foto geplaatst hoe het er nu uitziet ( of eigenlijk niet uitziet haha )
De HTML code en CSS code heb ik hieronder gezet zodat iemand het kan checken voor mij en mij van een oplossing kan voorzien.
--HTML code:--
HTML:
<section id="work">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>Our Work</h3>
<div class="content-title-underline"></div>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutters wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/1.jpg" title="Work Description Goes Here">
<img src="img/work/1.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/2.jpg" title="Work Description Goes Here">
<img src="img/work/2.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/3.jpg" title="Work Description Goes Here">
<img src="img/work/3.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/4.jpg" title="Work Description Goes Here">
<img src="img/work/4.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/5.jpg" title="Work Description Goes Here">
<img src="img/work/5.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/6.jpg" title="Work Description Goes Here">
<img src="img/work/6.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/7.jpg" title="Work Description Goes Here">
<img src="img/work/7.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
<div class="col-md-3">
<div class="img-wrapper">
<a href="img/work/8.jpg" title="Work Description Goes Here">
<img src="img/work/8.jpg" class="img-responsive" alt="work">
</a>
</div>
</div>
</div>
</div>
</section>
-- CSS CODE --:
.row.no-gutters [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.img-wrapper {
overflow: hidden;
}
.img-wrapper img:hover {
transform: scale(1.5);
}
Alvast bedankt voor alle hulp.
Laatst bewerkt door een moderator: