Forum | Appery.io

how to add close "x" sign on the top right corner of image

Hello.

Please follow these steps:

1 Add the page HTML component. And set type "div". Set "className" property with value "imageWrapper". Set both dimentions with "auto" value. http://prntscr.com/3rcxz4/direct

2 Insert your image component inside this HTML component.

3 Add inside this HTML component other HTML component. Set type "div" and set "className" property to "imageIcon". http://prntscr.com/3rcy3g/direct

4 Add new CSS asset and fill it with following code:

precode

div.imageWrapper{
position: relative;
width: auto;
height: auto;
display: inline-block;
}

.imageWrapper .imageIcon{
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
/* you should implement here background that's you need */
background: #f00;
cursor: pointer;
}

/code/pre

You should recieve following result:

http://prntscr.com/3rcyas/direct

Regards.