Enabling hover css transition for div that's behind another div which is only there for text

Question

I've got a site which I'm trying to develop the same way I did a wordpress site but the wordpress site is super sluggish so just recreating the cool bits.

The wordpress site is http://myleisure.com.au and as you can see at the top there's the 3 boxes with the product images and then text inside them. I've recreated this at the site http://ozledgrowlights.com.au/#portfolio and you can see the useless codepen here http://codepen.io/anon/pen/Qyxxbp

 <section id="portfolio">
<div class="container-fluid nopadding">
             <div class="row nopadding">

                   <div class="col-lg-4 nopadding image">
                        <img class="imgwidth" src="img/11.jpg" alt="" />
                                <div class="absolute text-center">
                                    <span> lol </span>
                           </div>
                   </div>
                <div class="col-lg-4 nopadding image">
                    <img class="imgwidth" src="img/22.jpg" alt="" />
                        <div class="absolute text-center">
                                <span> lol </span>
                        </div>
                </div>
                <div class="col-lg-4 nopadding image">
                    <img class="imgwidth" src="img/33.jpg" alt="" />
                        <div class="absolute text-center">
                                <span> lol </span>
                        </div>
                </div>

        </div>
    </div>
</section>

Basically I'm getting the text on top of the <img> via giving the img a relative position and the div for text an absolute position and top: 0px; the only issue is that because It's a div for the text, when I give it a height of 100%, it covers the hover zone of the img, any way around this? I saw a way to do the transition via javascript so might have to just do that.

But then I have a ...... part b to this question. Can anyone guess why the 2nd and 3rd image boxes get a thin black line between them when you hover over them?

Answer 1

Wrap them both inside another div and use the parent's :hover state to change the image.

Alternatively, make the text div a parent of the img and use its hover state directly.