Question

我试图在悬停时推送一些内容，我会在文本中提到＆＃34; HELLO＆＃34; （稍后将用图片替换）被白色背景和悬停内容推高，但由于某种原因它只是停留在同一个地方，我现在因为尝试了几种不同的位置类型，位置而陷入困境等等，没有运气。

我的代码是

<div class="four columns img-overlay" style="position: relative; border: 1px solid #E1E1E1;">
                    <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
                    <div style="display: inline-block; position: absolute; top: -11px; right: -11px; z-index: 10;">
                        <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
                    </div>
                    <div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;">
                        <p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Featured One</p>
                    </div>
                    <div class="overlay">
                        <h5 style="padding-top: 11px; margin: 0 0 15px 0;">Sub Title</h5>
                        <p style="margin: 0 0 15px 0; padding: 0;">Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!!</p>
                        <p style="margin: 0 0 15px 0; padding: 0 0 20px 0;"><a href="#">Featured Link</a></p>
                    </div>
                </div>

和CSS

.img-overlay {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .5s;
  overflow: hidden;
  height: 0;
  background: #FFF;
  text-align: center;
}
.img-overlay:hover .overlay,
.overlay:hover {
  height: 70.5%;
  background: #FFF;
}

.img-overlay > img {
  display: block;
}

.img-overlay:after {
  content: "HELLO";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: 'Amatic SC';
  text-align: center;
  color: red;
  font-weight: bold;
  z-index: 1;
  font-size: 30px;
  font-size: 3rem;
}

这是一个小提琴 - http://jsfiddle.net/mt5spmt7/

任何建议都会非常有用。

Answer 1

使其成为移动叠加层的一部分，并将隐藏的溢出移动到父

.overlay:after { content: "HELLO";}

请参阅http://jsfiddle.net/sjmcpherso/tetvvLL4/

在悬停时推送内容

1 个答案: