I am struggling to hide the <img src="/"> and layer the background image on a 480px media version.
Despite attempting to implement the solution provided in this Stack Overflow thread, I have not been successful in achieving the desired outcome.
For a visual representation, check out the JSFIDDLE.
Here is the HTML code snippet:
<div class="j_img-overlay">
<img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>
And here is the corresponding CSS code:
.j_img-overlay {
width: 100px;
height: 100px;
}
.j_img-overlay img {
background-size: auto;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
position: relative;
box-sizing: border-box;
width: 100px;
max-width: 100px;
z-index: 100;
}