繁体   English   中英

根据高度显示叠加div?

Revealing overlay div based on height?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个带有文本覆盖图像的图像,其中标题描述了图像。 在悬停时,我希望标题文本向上推,显示标题下方的描述文本。 但是,如果包含文本的div在高度上发生变化,则我的代码不起作用。 例如,当描述文本很短时,标题文本向上移动太多,导致两个div之间存在间隙。

因此,标题文本应根据描述div的高度向上移动。 我怎么做?

https://codepen.io/tayanderson/pen/qJrmXE

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Caramel Walnut Apple Pie
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Butter Cake
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

  <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
    <div class="title">
    Chocolate Pecan Ice Cream
    </div>
    <div class="desc">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>

.grid-item {
  display: inline-block;
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;

  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    font-size: 35px;
  }

  .desc {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
  }

  &:hover .title {
    bottom: 30%;
  }
  &:hover .desc {
    transform: translateY(0%);
  }
}
3 个回复

我想出了这个,首先我改变了你的标记

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
    <h1>Test</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam eius perspiciatis similique, unde impedit esse, temporibus quo.</p>
  </div>
</div>

现在你在同一个div中有标题和文字,然后你需要稍微改变你的css,我将div翻译成标题高度100%, transform: translateY(calc(100% - 40px)); 然后添加了一个过渡

.grid-item {
  display: inline-block;
  height:300px;
  background-size: cover;
  width:300px;
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 10px;

  .title h1 {
    font-size: 35px;
    margin: 0;
    height: 40px;
  }

  .title p {
    margin: 0;
    left: 0;
    right: 0;
    width: 90%;
  }

  .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(100% - 40px));
    transition: all .4s ease-out;
    padding: 0 20px;
  }

  &:hover .title {
    transform: translateY(0%);
  }
}

如果您正在寻找的话,请告诉我! 在这里你有一个codepen。

正如我在评论中告诉你的那样,我会将.title中的.desc作为h4 - 例如。 这可以解决您的问题。 接下来是一个演示:

 .grid-item { height: 250px; background-size: cover; width: 250px; position: relative; overflow: hidden; color: #fff; display:inline-block; margin:1em; } .grid-item .desc { position: absolute; bottom: 0; transform: translateY(100%); padding: 5px 20px; transition: transform 1.5s; } .grid-item:hover .desc { transform: translateY(0%); } 
 <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);"> <div class="desc"> <h4>Title</h4> Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet </div> </div> <div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);"> <div class="desc"> <h4>Title</h4> Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet </div> </div> 

嗯,或者你可能把冠军放在顶部?

<div class="grid-item" style="background-image: url(https://source.unsplash.com/WLUHO9A_xik/1600x900);">
  <div class="title">
  Short text
  </div>
  <div class="desc">
 ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

样式:

.title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0 20px;
  }

  .desc {
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    padding: 5px 20px;
    word-break: break-all;
  }

  &:hover .title {
    position: relative;
  }
  &:hover .desc {
    transform: translateY(0%);
    position: relative;
     word-break: break-all;
  }

在这种情况下,一切看起来更正确,没有跳过标题像这里: https//codepen.io/anon/pen/XyMQjO

1 Div重叠高度问题

大家好 我在另一个div内覆盖了div的情况。 当我在内部div中使用相对位置来创建叠加层时,为什么主div不适合高度大小。 看到我不能使用位置的图片 :绝对的,因为我需要在主div内滚动。 看代码: div.main { width: 300px; h ...

2 主体高度以根据覆盖层的高度扩展

我正在尝试实现一种布局,其中背景(绿色)为窗口高度的100%,并且如果有覆盖层(超出折叠部分),则背景高度应扩展以适应更大的高度。 我的holder有Overlay的原因是,如果这很重要,我正在使用React在身体顶部显示覆盖层。 html, body { height: ...

3 CSS 叠加 div 未拉伸到文档高度

我有一个使用 JavaScript 附加到文档的覆盖元素。 这是它的样式声明: 它的大小正确地延伸到窗口的高度,但是当用户滚动时,覆盖层不会跟随。 html和body元素设置为width: 100% ; 和height: 100% 。 覆盖层是文档的第一个子元素。 ...

2012-11-23 16:38:11 2 2587   css
5 显示隐藏的div的一部分

我有2张图片。 一个将作为背景,另一个将显示放大的版本。 仅应显示放大位的一部分-与显示div相交的部分。 因此,基本上我想在下面的代码中实现的是将循环(显示)div的内容设置为红色。 如果不可能以这种方式做到这一点,那怎么可能呢? ...

2014-03-07 10:42:49 1 84   css
6 基于内容的 Div 高度

当文档准备好时,我正在内容 div 中加载页面。 但是,我也有一些链接,每当用户点击它们时,它们就会将不同的页面加载到同一个内容 div 中。 我试图建立内容 div 的高度来控制其他东西,但是一旦在页面加载时设置了 div 的高度,我似乎无法获得包含新页面的内容 div 的新大小...... 例 ...

8 根据另一个div的高度设置div的高度

我正在尝试使div(覆盖)浮动在其他3个div的上方。 它在第一个(horsebanner)和第三个(footer)div中切入了一点,并在第二个(midbackground)中完全切入了。 我希望第二个div随着浮动div的增加而自动增大,以便浮动div切入第三个div的数量始终保持不变。 ...

9 div高度基于另一个div高度

我有3个专栏主题,我希望所有专栏都具有相同的高度。 左右列的高度是固定的,应与动态中间高度相同。 布局代码: ' CSS代码: 这只能在CSS中实现吗? 感谢任何帮助。 ...

2013-01-14 16:03:36 1 2008   css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM