sunil sunil - 1 year ago 69
HTML Question

Set a close icon in the top right corner of an image

I have a list of images using angularjs. I would like to display a close icon image in the top right corner of the each image. Please help me with the CSS, below is the code for listing images.

<div ng-repeat="file in imagefinaldata" style="display:inline;">
<img height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}" class="imgResponsiveMax" alt=""/>
<img class="close" src="" />

Answer Source

Add class in image parent div and do CSS. See below snippet.

.img_wrp {
  display: inline-block;
  position: relative;
.close {
  position: absolute;
  top: 0;
  right: 0;
<div ng-repeat="file in imagefinaldata" class="img_wrp">
  <img height=200 width=250 src="" class="imgResponsiveMax" alt="" />
  <img class="close" src="" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download