I am trying to achieve a similar effect as shown in this design where the image stands out from its background. I have managed to do that, but I am struggling with aligning the image to the center and bottom with overflow. Can anyone help me with this?
This is how it currently looks on my page https://i.sstatic.net/HyHtm.png
Here is the code snippet:
<div class="text-center flex flex-col relative">
<div class="hidden md:flex mx-auto flex flex-row items-center">
<p class="mr-4 text-white font-extrabold leading-tight text-4xl flex">Let the
music</p>
<div class="bg-other h-48 w-48 rounded-full overflow-hidden shadow-lg z-10">
<img src="Sources/img/assets/people_music_login.png" alt="people" class="object-cover h-full absolute top-0 left-12 " />
</div>
<p class="ml-4 text-white font-extrabold leading-tight text-4xl flex">carry you away</p>
</div>
</div>