I am currently working on a website and trying to replicate the design of a Wordpress site I created. However, the Wordpress site is very slow, so I am only recreating certain elements of it.
You can view the original website at . One of the features I recreated on my new site is the 3 boxes with product images and text inside them. You can also check out the code for this feature on CodePen 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>
In order to position text over the <img>, I used relative positioning for the img and absolute positioning with top: 0px for the text div. The only issue I encountered was that when I set the text div's height to 100%, it covered the hover area of the image. Do you have any suggestions on how to work around this? I read about using javascript for transitions, so I might explore that option.
Additionally, I noticed a thin black line appearing between the second and third image boxes when hovering over them. Any ideas on why this happens?