how to create the effect that the image stands out from the background

Question

I would like to create somethign like this https://dribbble.com/shots/17227956-Music-Landing-Page-Concept-UX-UI-Design to make it look like the image is standing out from its background. I can do that, but I'm having trouble with the image not being centered. But I do not know how to set image to the center and bottom to be overflow

Code:

<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>

Answer 1

To create the effect that the image stands out from the background, you can use a combination of CSS properties such as box-shadow, border-radius, and positioning. Here are some steps that you can follow to achieve the effect:

1. Apply a border-radius to the image container to create rounded corners. In your code, you have already applied a rounded border to the container with the class bg-other.

2. Apply a box-shadow to the image container to create a shadow effect. You can adjust the shadow properties such as the color, size, and offset to achieve the desired effect.

3. Position the image container relative to its parent container and set its z-index to a higher value to make it appear on top of the background.

4. Use absolute positioning to center the image within its container. In your code, you have already set the image to absolute position and aligned it to the top and left. To center it, you can use the transform property and translate it by 50% in both the X and Y directions.

Here's an updated code snippet that incorporates the above steps:

<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 relative">
      <img src="Sources/img/assets/people_music_login.png" alt="people" class="object-cover h-full absolute top-0 left-0 transform translate-x-1/2 translate-y-1/2" />
    </div>
    <p class="ml-4 text-white font-extrabold leading-tight text-4xl flex">carry you away</p>
  </div>
</div>

In the updated code, the image container with the class bg-other has been set to relative position to allow for absolute positioning of the image. The image has been centered both horizontally and vertically using the transform property. The z-index of the image container has been set to a higher value to make it stand out from the background. Finally, a box-shadow has been added to the image container to create a shadow effect.