How to add an image to an image?

Question

css

On top of each block, you need to add such a highlight:

the markup code itself

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
                    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
                    <div class="mini_post_text">
                        Italy<br/>
                        <span class="mini_post_price">from $1,050</span>
                    </div>
                </div>

Is it possible to do this with css, maybe overlay svg somehow? Or do I need to manually process each image in Photoshop?

Answer 1

<div class="col-md-3 col-sm-4 col-xs-6 mini_post">
    <!-- Бликовая картинка -->
    <img src="img/reflect_light.png" class="reflect_light">
    <!-- Обычная картинка -->
    <img src="img/Italy.jpeg" class="img-responsive img_mini_post" alt="Responsive image">
        <div class="mini_post_text">
            Italy<br>
            <span class="mini_post_price">from $1,050</span>
        </div>
</div>

.mini_post {
    position: relative;
}

.reflect_light {
    position: absolute;
}

Answer 2

Here