フローティング/ポップオーバーイメージ

Question

イメージに示されているようなカードを作成しようとしています。しかし、私はカード上に浮遊画像を作成することができません。 angle、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