CSS thumbnail with icon overlay

Question

So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.

EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="img/test/test04.png" alt="thumb01">
            <div class="col-xs-3 col-md-6">
                <div class="delivery alert alert-success">
                    <i class="fa fa-truck" aria-hidden="true"></i>
                </div>
            </div>
        </a>
    </div>
</div>

Delivery class:

.delivery{
position: absolute;
font-size: large;}

Answer 1

Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use @media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card , search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div , then just work with the elements using CSS ( display and the float , for example). Have fun :)