Enabling hover css transition for div that's behind another div which is only there for text <p>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. </p> <p>The wordpress site is <a href="http://myleisure.com.au" rel="nofollow">http://myleisure.com.au</a> 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 <a href="http://ozledgrowlights.com.au/#portfolio" rel="nofollow">http://ozledgrowlights.com.au/#portfolio</a> and you can see the useless codepen here <a href="http://codepen.io/anon/pen/Qyxxbp" rel="nofollow">http://codepen.io/anon/pen/Qyxxbp</a></p> <pre><code> &lt;section id="portfolio"&gt; &lt;div class="container-fluid nopadding"&gt; &lt;div class="row nopadding"&gt; &lt;div class="col-lg-4 nopadding image"&gt; &lt;img class="imgwidth" src="img/11.jpg" alt="" /&gt; &lt;div class="absolute text-center"&gt; &lt;span&gt; lol &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-lg-4 nopadding image"&gt; &lt;img class="imgwidth" src="img/22.jpg" alt="" /&gt; &lt;div class="absolute text-center"&gt; &lt;span&gt; lol &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-lg-4 nopadding image"&gt; &lt;img class="imgwidth" src="img/33.jpg" alt="" /&gt; &lt;div class="absolute text-center"&gt; &lt;span&gt; lol &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; </code></pre> <p>Basically I'm getting the text on top of the <code>&lt;img&gt;</code> 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 <strong><em>hover zone</em></strong> of the img, any way around this? I saw a way to do the transition via javascript so might have to just do that. </p> <p>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?</p>