42
Views
2
Comments
Solved
How to achieve overlapped image as shown in design but still responsive
Application Type
Reactive

Hi all,


I want to know how to achieve the required design in the image attached. I want a way to overlay the image which will be a users photo in the spot where it says "Picture". We are currently using columns for each individual button list shown in the image, if we try to put an image in the centre, it creates too much space above and below and gives margin to the middle headers.


Hope you can help. Thanks.

Capture.PNG
2018-10-29 08-31-03
João Marques
 
MVP
Solution

Hi Joel,


You can do it with CSS. Add to the image a class and in the theme, define the following properties to the image:


  • Your image should have position: absolute so it does not displayed relative to others.
  • Your image should have z-index: 2, for instance, to make it appear on top of the others (high in the z-axis).
  • And your image should have left: 50%; top: 50%; transform: translate(50%, 50%); to make it centered.

Your class CSS should look like this:

.myclass {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


Note that the parent div of the element should have position: relative.


You can use this link to learn more about the absolute position and this link on how to position an absolute element.


Kind Regards,
João

UserImage.jpg
Joel Pickin

Thanks for the advice João. This worked perfectly!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.