Is there a way to dynamically draw circle around the image using css on a foreach loop? CSS HTML

Question

I have these images and would like to draw circle around it

so I would like to draw circle around these images:

My expected output should be like this below:

So far I have this code with a foreach loop

<div class="flex">
    <div style="margin-left: 8em"></div>
        <?php foreach($baby_charts as $chart): ?>
              <tr>
                 <th>
                    <div class="circle">
                       <a href="<?php echo base_url(); ?>charts/view/<?php echo $chart['id']; ?>/<?php echo $this->uri->segment(3); ?> ">
                        <img class="img-tooth" src="<?php echo base_url(); ?>assets/images/babyteeth/upper/<?php echo $chart['img_tooth'] ?>">
                       </a>
                     </div>
                 </th>
             </tr>          
    <?php endforeach; ?>
</div>

@Sfili_81 I am afraid i am not sure where to begin with the css code. and the result is still the first image above. — Coder Codes, Jul 15 '20 at 12:42

score 1 · Accepted Answer · answered Jul 15 '20 at 12:44

You can achieve this by below style. I just remove your php code becuase it's not working here. so you can use your php code as well and it will work fine.

.circle{
  width: 60px;
  height: 60px;
  border: 2px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.circle a{
  display: inline-block;
}

.circle .img-tooth{
  max-width: 100%;
}

<div class="flex">
    <div style="margin-left: 8em"></div>
        
              <tr>
                 <th>
                    <div class="circle">
                       <a href="#">
                        <img class="img-tooth" src="https://placeimg.com/40/40/tech">
                        
                       </a>
                     </div>
                 </th>
             </tr>          
    
</div>

hello do you mind helping if there is a way to create an X shape? thanks :) — Coder Codes, Jul 15 '20 at 13:56
checkout this link https://stackoverflow.com/questions/18920542/draw-an-x-in-css — Rahul Panwar, Jul 15 '20 at 14:09

score 0 · Answer 2 · answered Jul 15 '20 at 12:43

0

You hace to use this for circle class, that will be for all foreach elements:

.circle{
    border: red 2px solid;
    border-radius: 50%;
}

answered Jul 15 '20 at 12:43

Carlos Eduardo Salazar Mori

363
6
13

Is there a way to dynamically draw circle around the image using css on a foreach loop? CSS HTML

2 Answers2