Place SVG in bottom right hand corner of image Bootstrap-CodePudding

I am trying to get an SVG to go in the bottom right-hand corner of an image in a bootstrap card. I tried a solution similar to this: I would like them instead to have the SVG in the bottom right corner of the all green image. like in the second picture.

.image{
  height:100%;
  position:relative;
  background-color:green;
  background-size: cover;
  background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}

.image .icon {
  position:absolute;
  bottom:0px;
  right:0px;
}

p.dash-intro.nav-btns {
    padding-top: 3rem;
}
   .col-md-4.padding-1 {
      padding-left: 5px;
      padding-right: 5px;
   }
   .ann-text {
   margin-bottom: 0px !important;
   }
   .ann-img {
   max-height: 40rem;
   }
   .dash-intro {
   color: black;
   font-size: 18px;
   margin-top: 35px;
   }
   .member-img {
   max-height: 7rem;
   margin-bottom: 6px;
   padding-left: 15px;
   }
   p.card-text {
   font-size: 11px;
   padding: 9px 15px 9px 0px;
   }
   .special {
   color: black;
   font-size: 19px;
   font-weight: bold;
   }
   .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: #D4E1D4;
   border-bottom: 1px solid rgba(0,0,0,0.125);
   }
   .hide {
   display: none;
   }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
   <br>
   <hr>
   <div >
      <div >
         <h4  id="members">Hub Members</h4>
      </div>
   </div>
   <div >
      <div >
         <div >
            <div >
               <div >
                  <div >
                     <div ><svg goes here. I didnt inlcude the full svg because it was too long> </div>
                  </div>
               </div>
               <div >
                  <p >
                     <span >Jane D <br></span> 
                     <span >Member Since: </span> Apr  13, 2022 <br>
                     <span >First Donation: </span> Feb  27, 2022 <br>
                     <span ><span ><i ></i></span>  [email protected]</span>
                     <br><span ><i ></i></span>  555 555 555 (cell)                     <br><span >Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
      <div >
         <div >
            <div >
               <div >
                  <div  stlye="background-image: url();">
                     <div >><svg goes here. I didnt inlcude the full svg because it was too long></div>
                  </div>
               </div>
               <div >
                  <p >
                     <span >Jane D <br></span> 
                     <span >Member Since: </span> Apr  13, 2022 <br>
                     <span >First Donation: </span> Feb  27, 2022 <br>
                     <span ><span ><i ></i></span>  [email protected]</span>
                     <br><span ><i ></i></span>  555 555 555 (cell)                     <br><span >Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
      <div >
         <div >
            <div >
               <div >
                  <div  stlye="background-image: url();">
                     <div >><svg goes here. I didnt inlcude the full svg because it was too long></div>
                  </div>
               </div>
               <div >
                  <p >
                     <span >Jane D <br></span> 
                     <span >Member Since: </span> Apr  13, 2022 <br>
                     <span >First Donation: </span> Feb  27, 2022 <br>
                     <span ><span ><i ></i></span>  [email protected]</span>
                     <br><span ><i ></i></span>  555 555 555 (cell)                     <br><span >Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

CodePudding user response：

I add an image inside .icon class you can add your svg.

Basically you need to give parent class which is .icon a position:relative and your svg (child) position:absolute than you can play inside with

bottom, left, right and top properties which in this situation need

bottom:0;
right: 0;

Here is your code

*,
*::before,
*::after {
  box-sizing: border-box;
}

.image{
  height:100%;
  position:relative;
  background-color:green;
  background-size: cover;
}

.image .icon {
  position:relative;
  width: 100%;
  height: 100%;
}

.image .icon img{
  position: absolute;
  bottom:0;
  right: 0;
  border-radius: 100%;
  width: 80px;
}

p.dash-intro.nav-btns {
    padding-top: 3rem;
}
   .col-md-4.padding-1 {
      padding-left: 5px;
      padding-right: 5px;
   }
   .ann-text {
   margin-bottom: 0px !important;
   }
   .ann-img {
   max-height: 40rem;
   }
   .dash-intro {
   color: black;
   font-size: 18px;
   margin-top: 35px;
   }
   .member-img {
   max-height: 7rem;
   margin-bottom: 6px;
   padding-left: 15px;
   }
   p.card-text {
   font-size: 11px;
   padding: 9px 15px 9px 0px;
   }
   .special {
   color: black;
   font-size: 19px;
   font-weight: bold;
   }
   .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: #D4E1D4;
   border-bottom: 1px solid rgba(0,0,0,0.125);
   }
   .hide {
   display: none;
   }

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

<div >
      <br />
      <hr />
      <div >
        <div >
          <h4  id="members">Hub Members</h4>
        </div>
      </div>
      <div >
        <div >
          <div >
            <div >
              <div >
                <div >
                  <div >
                    <img
                      src="https://source.unsplash.com/random/100x100"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div >
                <p >
                  <span >Jane D <br /></span>
                  <span >Member Since: </span> Apr 13,
                  2022 <br />
                  <span >First Donation: </span> Feb 27,
                  2022 <br />
                  <span 
                    ><span 
                      ><i ></i
                    ></span>
                    [email protected]</span
                  >
                  <br /><span 
                    ><i ></i
                  ></span>
                  555 555 555 (cell) <br /><span 
                    >Loaves to date:
                  </span>
                  5
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>