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

0 votes

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>

Apr 26, 2023 in UI UX Design by Ashwini
• 5,430 points
564 views

1 answer to this question.

0 votes

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.

answered Apr 26, 2023 by Tanishqa
• 1,170 points

Related Questions In UI UX Design

0 votes
1 answer

How to create Custom UITabBarController in Swift with round button in the center?

Your implementation is almost correct, you just ...READ MORE

answered Apr 27, 2023 in UI UX Design by vishalini
1,696 views
0 votes
1 answer

Is there a way to create a list that auto populates with the the required articles?

Yes, there are several ways to auto-populate ...READ MORE

answered Apr 27, 2023 in UI UX Design by Anitha
478 views
0 votes
1 answer
0 votes
1 answer

UI/UX design or audit - how to measure the costs?

When it comes to charging for a ...READ MORE

answered Apr 25, 2023 in UI UX Design by Tej
377 views
0 votes
1 answer
0 votes
1 answer

Slack UI/UX design with collapsable columns

To replicate Slack's collapsible functionality using Split.js, ...READ MORE

answered Apr 25, 2023 in UI UX Design by pooja
410 views
0 votes
1 answer

How do I set variable if a specific package version is installed in CFEngine?

Here is what you can do.Just use packagesmatching to ...READ MORE

answered Jul 12, 2018 in Other DevOps Questions by Atul
• 10,240 points
1,026 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
9,903 views
0 votes
1 answer

Trying to create a design system/kit with Swift

I can certainly guide you on where ...READ MORE

answered Apr 26, 2023 in UI UX Design by Tanishqa
• 1,170 points
365 views
0 votes
1 answer

How do I make it where when I change my window size, the content adjusts with it?

To make the content adjust with the ...READ MORE

answered Apr 26, 2023 in UI UX Design by Tanishqa
• 1,170 points
387 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP