CSS：この効果を得るには？ （カードの上の写真、外に出てくる絵）

Question

私はかなり新しいCSSです。誰かがこの効果を以前に尋ねた場合、私はその名前を知らないのです。私はこの効果または何それの名前ですを作成するホット分からない ：私はこれ（写真1）を作成する必要があり

は、私は現在、この（写真2）を持っています。 私はz-indexとpaddingで試してみましたが、これが最善の解決策ではないと思います。

<div class="row text-center"> 
    <div class="col-lg-4"> 
     <div class="card" style="width: 20rem;"> 
      <img class="card-img-top" src="picture.png" alt="Card image cap"> 
      <div class="card-block"> 
       <h4 class="card-title">Mirion Jones</h4> 
       <p class="card-position">CEO Founder</p> 
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
      </div> 
     </div> 
    </div> 
</div> 

私は

Answer 1

は、以下のコードがお役に立てば幸いブートストラップ4を使用しています：ここで

（写真2）のコードです。画像サイズを60ピクセルで60ピクセルに設定し、それに応じて marginと topを設定すると、希望のサイズで変更する必要があります。

.card-img-top { 
 
    position: absolute; 
 
    top: -30px; 
 
    left: 50%; 
 
    margin-left: -30px; 
 
    width: 60px !important; 
 
    height: 60px; 
 
} 
 

 
.card { 
 
    margin-top: 30px; 
 
    padding-top: 30px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 

 

 
<div class="row text-center"> 
 
    <div class="col-lg-4"> 
 
    <div class="card" style="width: 20rem;"> 
 
     <img class="card-img-top img-circle rounded-circle" src="https://dummyimage.com/100x100/000/fff" alt="Card image cap"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Mirion Jones</h4> 
 
     <p class="card-position">CEO Founder</p> 
 
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>