浮动/弹出图像

Posted 2023-02-22

【中文标题】浮动/弹出图像

【英文标题】：Floating/Popover Image

【发布时间】：2017-02-02 02:09:29

【问题描述】：

我正在尝试创建一张如图所示的卡片。但是我无法在卡上创建浮动图像。任何有关如何使用 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;
`

我已经做到了： Card so far

【参考方案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

【讨论】：

我需要图像浮出卡片，如图所示。