Displaying an image over another image - laravel

Question

I have a carousel showing images. Some of them are thumbs of youtube video in that case i want an image of a play button to be displayed over the thumb image to show that it is a video not a simple image.
<div class="carousel-inner">
#foreach($realisation->images as $key => $img)
#if($img->type == 'image')
<div class="item {{ $key == 0 ? 'active': '' }}">
#if(File::exists($img->image))
<img src="{{asset($img->image)}}" class="image" alt="realisation{{$img->id}}"/>
#endif
</div>
#else
<div class="item {{ $key == 0 ? 'active': '' }}">
<a href="{{$img->video}}" data-lity>
<img src="{{ LaravelVideoEmbed::getYoutubeThumbnail($img->video) }}" class="image" alt="realisation{{$img->id}}">
<img src="{{asset('img/icon-14-orange.png')}}" alt="">
</a>
</div>
#endif
#endforeach
</div>

Answer 1

change your code, add class for play image class="playOverlay":
.....
#else
<div class="item {{ $key == 0 ? 'active': '' }}">
<a href="{{$img->video}}" data-lity>
<img src="{{ LaravelVideoEmbed::getYoutubeThumbnail($img->video) }}" class="image" alt="realisation{{$img->id}}">
<img class="playOverlay" src="{{asset('img/icon-14-orange.png')}}" alt="">
</a>
</div>
#endif
.....
css:
.item{position:relative}
img.playOverlay{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}