CODEWITHSUNDEEP
csshoveroverlay
Graeme Bryson
Graeme Bryson

Reputation: 193

CSS Image Overlay Issue

I'm currently trying to set up an image hover effect for some product gateways, but I've noticed an issue that I can't find the source of - the image overlay itself seems to be escaping it's parent div (the additional coverage under the image):

http://jsfiddle.net/pzA6Y/1/

The issue in situ: http://energy-hypermarket.org/sandbox

HTML

    <div class="boxholderleft">
    <div class="productbox">
    <div class="img-wrap">
    <a href="/boilers"><img src="http://energy-hypermarket.org/wp-content/uploads/boiler.box.jpg" alt="Boilers" /></a><div class="img-overlay">
    <h4>Title</h4>
    <p>A description of the image</p>
    </div>
    </div>
    <div class="boxtext"><h2><a href="/boilers">Boilers</a></h2>
    Heat your home properly whilst saving money with an energy efficient boiler.</div>
    </div>
    </div>

CSS

    .boxholderleft {
    float: left;
    height: auto;
    padding-bottom: 40px;
    padding-right: 20px;
    width: 50%;
    }

    .productbox {
    background-color: #FFFFFF;
    border:1px solid rgba(0, 0, 0, 0.09);
    height: auto;
    text-align: left;
    float:left;
    }

    .img-wrap{
    height:auto;
    overflow:hidden;
    position:relative;
    width:100%;
    }

    .img-overlay{
    background-color:#000;
    bottom:0;
    color:#fff;
    opacity:0;
    filter: alpha(opacity = 0);
    position:absolute;
    width:100%;
    height:100%;
    z-index:1000;
    }

    .img-overlay h4, .img-overlay p{
    padding:0 10px;
    text-align: center;
    vertical-align:middle;
    }

    .img-wrap:hover .img-overlay{
    opacity:0.45;
    filter: alpha(opacity = 45);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
    }

    .boxtext h2 a{
    font-size: 25px;
    color:#5e5e5e !important;
    line-height:33px !important;
    }

    .boxtext h2 a:hover {
    color:#0FABA2 !important;
    -webkit-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -o-transition: color 0.2s ease-out;
    }

Thanks in advance for any insight anyone can offer, I'm tearing my hair out.

Upvotes: 0

Views: 1019

Answers (2)

Graeme Bryson
Graeme Bryson

Reputation: 193

Awesome - adding 'display:block' and removing the bottom margin on the image fixed the problem. Thanks to Mr_b and popnoodles! (:

Upvotes: 0

Mr Br
Mr Br

Reputation: 3901

It's because your image has margin-bottom:15px; (img inside a in .img-wrap). I don't know structure of you CSS, but I believe this could solve problem for this specific case and for other items.

CSS
.img-wrap a img{margin-bottom:0;}

If this doesn't help then you need to add more CSS (maybe class or better path) and remove this margin bottom. Hope it helps.

Upvotes: 1

Related Questions