On my website (http://milesopedia.com) I have this overlay on the image. But the icon is not correctly aligned, as you can see here:
It's a Wordpress-based blog with a theme and if I look at the preview of the theme (http://themes.tielabs.com/sahifa/category/world/) the element is correctly positioned:
I have compared the html and css and they seem identical to me. The markup use a span with a pseudo before element to render the icon. I can't find the source of the problem.
Here's the code:
<a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark">
<img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">
display: inline; for that