sunil sunil - 1 month ago 11
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="http://wecision.com/enterprise/images/icons/closeIcon.png" />
</div>

Answer

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="https://wecision.com/images/wrc-1.png" class="imgResponsiveMax" alt="" />
  <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png" />
</div>

Comments