浮動/彈出圖像

Question

我正在嘗試創建一張像圖中所示的卡片。 但是我無法在卡上創建浮動圖像。 任何有關如何使用 angular、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;
}`

我已經做到了：到目前為止的卡片

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