CSS Image overflow trotz overflow hidden

[raven16]

Hallo,

ich verzweifel gerade ein wenig daran, das richtige Padding zwischen den "Fotoalben" zu erzeugen:

Wie man auf dem Foto gut sehen kann, überdeckt das Bild von dem Fotoalbum das gesetzte Padding von dem Eltern-Element, obwohl ich dort das Overflow verbiete. Das Padding nach oben funktioniert hingegen.

Die Fotoalben werden jeweils als Bild dargestellt und jedes Bild soll ein Padding von 15 Pixel haben.

Hier nun der Code:

PHP:

<div class="col-lg-4 col-md-6 col-sm-6 padding animated fadeIn index-gallery-item">
	<div class="img-zoom-container">
		<div class="img-zoom-item" style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');"></div>
		<div class="img-zoom-overlay">
			<h2><?= get_the_title(); ?></h2>
			<a class="btn-img" href="#">Album ansehen</a>
		</div>
	</div>
</div>

CSS:

.padding { padding: 15px !important; }

.index-gallery-item, .index-gallery-item > div {
    height: 250px;
    overflow: hidden;
}

.img-zoom-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.img-zoom-item {
    width: 100%;
    height: 100%;
    background-color: black;
    background-position: center;
    background-size: cover;
    transition: all .5s;
}

Wäre für jeden Tipp dankbar

 

[coolmodi]

Padding gehört noch zum Element, ist also noch kein "overflow" aus dem Element heraus

Edit: Mit "box-sizing: border-box" ist das aber anders, sollte man eh nutzen, denn dann sind 100% auch wirklich 100% der nutzbaren Größe, also ohne padding. Ohne verschiebst du das 100% height img-zoom-item einfach um das padding nach unten. Siehe https://jsfiddle.net/hnvesdvw/1/

 

[ayngush]

Das über mir +
Setze das Padding auf 0 und nimm Margin zur Abstandskontrolle