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

sunil

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>
Krupal Patel

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to set the image icon on top right corner beyond the boundary of dialog

How can I overlay an icon on the top right corner of image?

Set a close icon in the top right on camera scanner using angular material

How to add close icon in Material UI Dialog Header top right corner

How to get a "close" icon floating on the top right corner of a v-dialog

Android: putting an icon in the top right corner of a collapsingToolbarLayout?

Position icon at the top right corner of a fieldset with legend

Slack icon not visible in top right corner in ubuntu

Position icon at the top right corner of a div

Put Font Awesome icon in top right corner

How I can set this icon to top right corner without space in flutter UI

Place an image/icon in the upper right corner of a div

how to place button on top right corner of image

Placing an image to the top right corner - CSS

Image in the top right corner of the table using css

How to set DockWidget at Top Right corner of QGIS?

Align number over image to top right corner or on the top of image

how to make button with close icon in right corner using react js

Why is there a "plus" icon at the top right corner of my view?

How to put the number at top right corner of cart icon?

How to position an Icon/Button at the Top Right corner of a Container in FLUTTER?

How do I design a div with a top right corner icon?

Position icon top right hand corner of frame xamarin forms

Adding action button (icon) on top right corner of the shiny dashboard box

How can i place cancel icon on top right corner

How to have a close button on the top right corner in nativescript?

Align close button on top right corner of ImageBackground react native

CSS Positioning an icon at the top right side of the image

Python XLWT - Insert Image aligned to top-right corner of cell