Question

我正在尝试创建元素的显示。

元素需要有图像和叠加层（包含文本）。悬停时的叠加层需要在悬停时进行上滑过渡。我已经做到了。

但问题是叠加div超出了图像div。虽然它应该完全出现在它内部。

我正在使用Bootstrap。

蓝色的Div不应超出图像的左右边界，并且在不仅仅悬停50px时也应该可见。悬停时，剩余的内容应该是可见的。

这是我的HTML代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
          <div class="main-container">
            <img class="image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97300&w=350&h=300">
            <div class="content">
              Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

    Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
            </div>
          </div>
        </div>
      </div>
    </div>

这是我的CSS代码：

/* Set to 100% of col-md-6 */
.main-container {
  width: 100%;
  height: 300px;
}
/* Image Container */
.main-container > img.image {
  position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 100;
}
/* Overlay */
.main-container > .content {
  width: 100%;
    position: absolute;
    height: 150px;
    bottom: -110px;
    left: 0;
    right: 0;
    z-index: 101;
    padding: 10px 20px;
    background-color: rgba(52, 152, 219, 0.8);
    color: #ffffff;
    transition: all ease 1s;
}
/* Overlay Hover */
.main-container > .content:hover {
  bottom: 0px;
    transition: all ease 1s;
}

FIDDLE

Answer 1

您正在使用public interface Transformer<TSource, TResult> { TResult Transform(TSource original); } public class NoopTransformer<TSource, TResult> : Transformer<TSource, TResult> where TResult : class { public TResult Transform(TSource original) { return original as TResult; } } public class Controller<TEntity, TResult> where TResult : class { private Transformer<TEntity, TResult> transformer; public Controller() : this(new NoopTransformer<TEntity, TResult>()) { } public Controller(Transformer<TEntity, TResult> transformer) { this.transformer = transformer; } }，它会将自己相对于也设置了位置的第一个父级（position: absolute除外），并且您希望它与{{1}相关联}，将static添加到其规则

根据评论更新

Updated fiddle

.main-container

相对Div内的绝对div，带有向上滑动过渡

1 个答案: