CodePen

HTML

            
              <div class="img">
  <img src="http://oandg.co.uk.s156312.gridserver.com/images/RDF/rdf1.jpg" alt="" />
    <div class="info">
                    <img src="http://oandg.co.uk.s156312.gridserver.com/images/info.svg" alt="" class="info">
        <div class="text">
            <h4>What we did for them</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem distinctio deserunt nostrum illum dolor obcaecati eaque ipsam! Distinctio, ipsa accusamus saepe temporibus ex pariatur possimus quidem sapiente obcaecati labore sto.</p>
        </div>
    </div>
</div>
            
          
!

CSS

            
              .img {
    position: relative;
}
.img > img:not(.info) {
    width: 100%;
}
.img .info {
    position: absolute;
    bottom: 25px;
    left: 30px;
}
.img .info .text {
    background: rgba(black, 0.4);
    color: white;
    width: 350px;
    margin-left: 35px;
    margin-top: 35px;
    padding: 1px 5px;
}
.img .info img {
    posotion: absolute;
    top: -5px;
    left: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.img .info img.info').click(function () {
    var $this = $(this);
    if ($this.parent().find('.text').hasClass('hidden')) {
        $this.parent().find('.text').animate({ opacity: 1 }, 1000, function () {
            $(this).removeClass('hidden');
        });
    } else {
      $this.parent().find('.text').animate({ opacity: 0 }, 1000, function () {
          $(this).addClass('hidden');
      });
    }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................