Leon Laci Leon Laci - 5 months ago 6
CSS Question

Link is not the same height as child elements

I have an item which has 2 child elements, one is a container for text and the other one is an image. After the item there is a blank space. I used inspect element and that spaces belongs to the link, but to me id doesn't make sense. I am new to web development so please don't be hard on me.

jsfiddle: https://jsfiddle.net/semfa64e/
This is a mobile first design so you should probably make the result window smaller.

HTML:

<div class="item">
<a href="#">
<div class="item-content">
<h3>Item title</h3>
<p>Item description lorem ipsum dolor sit amet contrectetur</p>
</div>
<img src="http://lorempixel.com/200/300" alt="img" />
</a>
</div>

<div class="item">
<a href="#">
<div class="item-content">
<h3>Item title</h3>
<p>Item description lorem ipsum dolor sit amet contrectetur</p>
</div>
<img src="http://lorempixel.com/200/300" alt="img" />
</a>
</div>


CSS:

.item {
width: 100%;
height: auto;
}

.item-content {
position: absolute;
text-align: center;
color: #fff;
width: 80%;
margin-top: 90%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .2s ease-in-out;
}

a:hover .item-content {
opacity: 1;
margin-top: 20%;
background-color: rgba(24, 24, 24, .7);
}

img {
width: 100%;
height: auto;
}

Answer

add display: block; to your img-tag

Comments