4

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>
DBS
  • 9,110
  • 4
  • 35
  • 53
sunil
  • 195
  • 1
  • 3
  • 11

4 Answers4

13

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>
Krupal Patel
  • 1,387
  • 3
  • 12
  • 28
2

try this, it should work

.img-container {
  display: inline;
  position: relative;
}
.close {
  position: absolute;
  right: 0;
}
<div class="img-container" ng-repeat="file in imagefinaldata">
  <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>
Rahul
  • 4,294
  • 1
  • 10
  • 12
1

Add a class to the parent for the shake of this example:

<div ng-repeat="file in imagefinaldata" class="parent">
    <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>

And your style can me like this:

.parent {
  display: inline;
  position: relative;
  width: 100%;
  height: auto; // Or your height
}
.parent img.close {
  position: absolute;
  right: 0;
  top: 0;
  height: 21px;
  width: 21px;
}

Of course alter this style to match your needs. There was no example to provide you exactly the sizes.

Vassilis Pits
  • 3,788
  • 4
  • 33
  • 48
0

please take looke at this link Switching the order of block elements with CSS

maybe its help

but you can do it with position rule in css

use this css code :

.imagefinaldata{position:relative;}
.imagefinaldata .close{width:21px;height:21px;position:absolute;left:3px; top:3px;}
.imagefinaldata img:first-child{margin-top:30px;}

I hop this help

Community
  • 1
  • 1
Farhad Azarbarzinniaz
  • 719
  • 4
  • 17