I'm currently working on designing a card similar to the one displayed in the image. However, I'm facing difficulty in creating the floating image effect on the card. Any tips or suggestions on how to achieve this using angular, jquery, css, or any free plugins along with some sample code would be greatly appreciated.
At the moment, I am utilizing the materialize framework.
The code snippet I've used for creating the card is as follows:
`
<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 corresponding CSS styles are as follows:
`
.card-image img {
position: absolute;
bottom: 8px;
left: 16px;
height: 100%;
}
.card-title {
padding-left: 20px;
}`
Here is the current progress of the card design: Card so far