In my JavaScript code, I have created an array of images arranged in a row on the webpage using the split method. The images are displayed in circles. However, I now need to add a smaller circle cutout at the bottom right of each larger circle to showcase a smaller image. This is the desired look: https://i.sstatic.net/iUPwN.png
I am facing difficulty figuring out how to achieve this. Can someone please provide assistance?
Below is the code I am using for creating these circles using Bootstrap and JavaScript.
Bootstrap
<div class="row" id="partner_row"></div>
Javascript image array with split
let image_arr = [{
id: 'part_1',
image_src: '../assets/partner1.jpg',
h6_tag: 'Bradley Hunter',
p_tag: 'Based in Chicago. I love playing tennis and loud music.',
},
{
id: 'part_2',
image_src: '../assets/partner2.jpg',
h6_tag: 'Marie Bennet',
p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
},
{
id: 'part_3',
image_src: '../assets/partner3.jpg',
h6_tag: 'Diana Wells',
p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
},
{
id: 'part_4',
image_src: '../assets/partner4.jpg',
h6_tag: 'Christopher Pierce',
p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
},
];
$(document).ready(function () {
// create
createPartnerRow(image_arr);
// set image background
})
$(document).ready(function () {
$("[id^=part_]").hover(function (image_arr) {
$(this).addClass('border')
},
function () {
});
});
$("[id^=part_]").ready(function () {
$("[id^=part_]").click(function () {
$(this).removeClass('border')
// set value
var current_partner = image_arr[0];
// remove first element from array
image_arr = image_arr.splice(1, 4);
// append current_partner to end of array
image_arr.push(current_partner);
// clear the row of all partners;
$('#part_1, #part_2, #part_3, #part_4').remove();
// recreate row
console.log(image_arr);
createPartnerRow(image_arr);
});
})
function createPartnerRow(image_arr) {
for (i = 0; i < image_arr.length; i++) {
$('#partner_row').append(
'<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
'<button class="border-0 bg-white">' +
'<img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/>' +
'<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
'<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
'</button>' +
'</div>'
)
}
}