Floating/Popover圖片

Question

我正在嘗試創建一張像圖片中顯示的卡片。但是我無法在卡上創建浮動圖像。任何指導如何使用角度，jQuery的，CSS或任何免費插件與示例代碼實現效果將不勝感激。

目前我使用兌現框架。

我已經用於創建卡的代碼是這樣的：

`

<div class="col s6"> 
         <div class="card card white lighten-1 horizontal" style="height: 300px; width: 500px;"> 
         <div class="card-image"> 
         <img src="assets/dark_murder.jpg"> 
         </div> 
         <div class="card-content grey-text"> 
         <span class="card-title">Dark Murder</span> 
         <div class='starrr' id='star1'></div> 
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
         <div class="card-action"> 
         <a href="#">This is a link</a> 
         </div> 
         </div> 
         </div> 
         </div> 

` 

The css is this: 
` 
.card-image img { 
position: absolute; 
    bottom: 8px; 
    left: 16px; 
    height: 100%; 
} 
.card-title { 
    padding-left: 20px; 
}` 

，我已經實現了這個： Card so far

Answer 1

您可以輕鬆創建使用自舉。

HTML

<div class="card-content"> 
    <h2> Ttitle goes here</h2> 
    <p>Lorem ipsum dolor sit amet, 
     consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut 
     labore et dolore magna aliqua.</p> 
     <a href=""> Cleck here to read more</a> 
</div> 

CSS

.card { 
    background-color: #bdbdbd; 
    margin: 30px 0; 
    padding: 30px 0; 
    overflow: hidden; 
} 

檢查演示：http://codepen.io/sifulislam/pen/XjrajE