I am facing a challenge with the following markup:
<div class="container">
<figure></figure>
<figure></figure>
<figure></figure>
</div>
My task is to add a symmetrical element for each of the figures, but with different height and width values. The size of each new element should be reduced by about 10% in both width and height compared to its corresponding original image. Specifically, the first element should have 90%, the second 80%, and the third 70% of the initial size. I attempted to achieve this using the code below, but it seems to not work as expected. Can someone provide guidance?
var inside_element = $(figure);
var indx = 10;
inside_element.each(function(indx){
$(this).css({
width: '90%' - indx,
height: '90%' - indx
});
});
Thank you!