Ionic image overlay - css

Question

Im used Ionic-3 for my university project ,Im attached some code for HTML that code for working fine for the Bootstrap, Im try to make like this code for Ionic buts its not working correctly ,
I want the image to be overlay with white color tick mark on it(As it is selected), I have lot of multiple images for my table, actually really I don't know how to do that ionic, I can do it Normal HTML
please help me to fix this,
Ionic code
<ion-grid>
<ion-row>
<ion-col>
<div class="imageandtext image_grid"><p class="item-txt" text-center>Asanka</p>
<ion-label for="selimg1">
<ion-avatar item-start>
<img src="assets/imgs/man.png">
</ion-avatar> <ion-checkbox color="secondary" checked="true" style="position: relative;float: right; top:-1.5rem;left: -1rem;"></ion-checkbox>
</ion-label> <ion-checkbox name="selimg" id="selimg1"></ion-checkbox>
<div class="caption">
</div> </div>
</ion-col>
look snippet its work for HTML
img {
border-radius: 50%;
}
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
border-radius:500px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 30px; height: 30px;
transform: translate(-50%,-50%);
color: white;
font-size: 20px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
</label>
<input type="checkbox" name="selimg" id="selimg1">
<div class="caption">
</div>
</div>
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg2">
<img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
</label>
<input type="checkbox" name="selimg" id="selimg2">
<div class="caption">
</div>
</div>

Answer 1

If you have any working HTML and CSS, just use it in Ionic directly, no need to convert it to Ionic component.
In .html file:
<div class="grid-two imageandtext">
<div class="imageandtext image_grid" *ngFor="let image of images; let i = index">
<label for="selimg{{i}}">
<img src="{{image}}" />
</label>
<input type="checkbox" name="selimg" id="selimg{{i}}" />
<div class="caption">
</div>
</div>
</div>
In .scss file:
img {
border-radius: 50%;
}
...
//Keep going. Add all your css here