Bera Bera - 7 months ago 22
HTML Question

CSS image darken adding extra 7px to bottom

I have some images that I use CSS to make a darker background.
This makes the images darken on hover. It can be seen at rtsb.co.uk on the main images.

However when viewing the images, the background is shown slightly behind the images, seen as a grey stripe under each image. the images are 600px height, but for some reason, the code for 'outerLink' makes it 607px height and so the bar appears, this can be seen using Chrome dev tools when viewing the page.

<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>


.outerLink
{
background-color:#e8e8e8;
display:block;
opacity:1;
filter:alpha(opacity=100);
}

img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}


I've tried looking at everything to find where this added 7px comes from but I can't find it anywhere.

Even if I change the name of the CSS to .outerLinktest, the tag above still seems to pick up a height of 19px from somewhere.

I cannot add a height CSS attribute to .outerLink as the page is dynamic for mobiles etc and the images resize due to this so won't always be 600px high.

Answer

Use display:block; on img class.

img.darkableImage 
{
    opacity:1;
    filter:alpha(opacity=100);
    display:block;
}

Check Fiddle