Question

我有一个特定的问题，我一直坚持。

我有一个正方形，其中有图片和文字。我需要做的是，当盒子悬停时，隐藏的文本应该从底部出现并向上推动图像（溢出：隐藏在包装器上会将其剪掉）。文本是任意长度，动作应该是css-only（没有javascript）

html是：

<div class="wrapper">
    <div class="image"><img src="http://placehold.it/200x200" /></div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>

和css：

.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}

.content {
    height:0;
    overflow:hidden;
    transition: all 0.5s ease;
}

.wrapper:hover .content {
     height:auto;   
}

（这只是一个样本）

这是一个jsFiddle： http://jsfiddle.net/a136ddj8/2/

（如果在悬停时没有看到任何内容，请删除溢出：从包装类中隐藏）

关于如何实现这一目标的任何想法？它甚至可能吗？

Answer 1

在这种情况下，您可以使用额外的包装器：

<div class="wrapper">
    <div class="wrap">
      <div class="image"><img src="http://placehold.it/200x200" /></div>
      <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    </div>
</div>

然后使用CSS，您可以将额外的容器置于绝对位置以完成推送效果...此外，您无法将height设置为自动，而是使用max-height上的固定值。

.content {
    max-height:0;
    transition: all 0.5s ease;
    overflow:hidden;
}
.wrapper:hover .content {
     max-height:500px;   
}

检查下面的代码段

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}
.wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 100%;
}
.image img {
  vertical-align: middle;
}
.content {
  max-height: 0;
  transition: all 0.5s ease;
  overflow: hidden;
}
.wrapper:hover .content {
  max-height: 500px;
}

<div class="wrapper">
  <div class="wrap">
    <div class="image">
      <img src="http://placehold.it/200x200" />
    </div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>

Answer 2

使用位置属性进行游戏。

这是演示

＆＃13;

.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}

.content {
   
    overflow:hidden;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    position:relative;
    padding:20px;
    top:0
}

.wrapper:hover .content {
     height:auto; 
    top:-200px;
    
    
}
.image img{ position:relative;transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; top:0;}
.wrapper:hover img { top:-200px;}

＆＃13;

<div class="wrapper">
    <div class="image"><img src="http://placehold.it/200x200" /></div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>

＆＃13;

使用css定位将制作动画。这是演示。

Answer 3

首先，您可以使用图形和图形标题使其更加语义化。但是，你受到了一些限制。如果你想在没有javascript的情况下这样做，你将被限制在容器上的固定高度。这是一个片段：

.slide-up-caption { /* main figure element, requires fixed height */
   height: 200px;
   width: 200px;
   overflow: hidden;
   position: relative;
   border: 1px solid black;
}


.slide-up-caption img { display: block } /* clears spacing issues */

.slide-up-caption-inner { /* wrapper around img and caption that sticks to bottom */
    position: absolute;
    bottom: 0;
    left: 0;
}

.slide-up-caption figcaption {
    height: 0;
    padding: 0 .5em; /* no padding on top & bottom to make it hidden completely */
    background: black;  
    color: white;
    -webkit-transition: all .25s; /* transition just for fun */
    -moz-transition: all .25s;
    transition: all .25s;
}

.slide-up-caption:hover figcaption {
  height: auto; /* only think you really need here */
  padding: .5em; /* add padding for style */
  -webkit-transition: all .25s; /* transition for fun */
  -moz-transition: all .25s;
  transition: all .25s;
 }

<figure class="slide-up-caption">
  <div class="slide-up-caption-inner">
    <img src="http://placehold.it/200x200" alt="placeholder img">
    <figcaption>This is demo content.</figcaption>
  </div>
</figure>

Answer 4

这应该引导你正确的方式。显然，你会想要使用造型。主要是使用定位，而不是高度。

http://jsfiddle.net/wilchow/a136ddj8/5/

* {
    box-sizing: border-box;
}
.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
    position:relative;
}
.content {
    transition: all 0.5s ease;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 210px;
    margin:0;
    padding: 5px;
}
.wrapper:hover .content {
    height:auto;
    position: absolute;
    top: 10px;
}

使用css在包装器中从底部向上移动div

4 个答案: