html-使用CSS从下至上对div进行动画处理

概述我需要为从下到上的div设置动画.这种情况：我有一个缩略图,其中包含电影的标题和描述.我想隐藏描述,仅在用户将鼠标悬停在其上时显示.我尝试调整容器的高度,但将值设置为“自动”时,您无法设置其动画效果,并且我无法提供具体的大小,因为每个电影的标题可能会有所不同.众所周知,您无法使用“底部”和“顶部”属性从底部到顶部进行动画处理.这是html：<div c

我需要为从下到上的div设置动画.
这种情况：
我有一个缩略图,其中包含电影的标题和描述.我想隐藏描述,仅在用户将鼠标悬停在其上时显示.

我尝试调整容器的高度,但将值设置为“自动”时,您无法设置其动画效果,并且我无法提供具体的大小,因为每个电影的标题可能会有所不同.
众所周知,您无法使用“底部”和“顶部”属性从底部到顶部进行动画处理.

这是HTML：

<div >  <img  src="background.jpg" alt="">  <div ></div>  <div >    <div >        <p >The movIE Title</p>        <div ></div>        <p >            Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua.        </p>        <p >Published by Author</p>    </div></div>

这是我要完成的工作的图像：

老实说,我完全迷路了,我想我尝试了一切.
对不起,我的英语不太好.最佳答案完全灵活且响应迅速
没有硬编码或任意高度,不涉及Js.

基本上,

>将标题转换为-100％,悬停动画为0
>将标题和内容都包装到div中(即：.anim)
>将.anim转换为100％,然后悬停将其动画为0

全页打开示例以查看发生的情况及其工作方式：

/*Quickreset*/*{margin:0;Box-sizing:border-Box;}.thumb {  wIDth: 140px;  background: #eee;}.anim {  Transition: 0.5s;  transform: translateY(100%);}.Title {  color: red;  Transition: 0.5s;  transform: translateY(-100%);}.author {  color: blue;}/* ANIMATE */.thumb:hover .anim,.thumb:hover .Title {  transform: translateY(0);}

<div >  <div >    <div >The movIE even longer Title</div>    <div >      Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover    </div>  </div>  <div >Published by super long some Author</div></div>

FlexBox网格！

概念的真实案例示例：

/*Quickreset*/* {  margin: 0;  Box-sizing: border-Box;}HTML {  height: 100%}body {  min-height: 100%;  Font: 14px/1.4 sans-serif;}.grID-3 {  display: flex;  flex-flow: row wrap;}.thumb {  display: flex;  flex-flow: column nowrap;  position: relative;  overflow: hIDden;  wIDth: 33.333%;  color: #fff;}.thumb-gradIEnt,.thumb-img {  position: absolute;  top: 0;  left: 0;  wIDth: 100%;  height: 100%;  object-fit: cover;}.thumb-gradIEnt {  background: linear-gradIEnt(to bottom,rgba(0,0.24) 0%,0.56) 100%);}.thumb-anim {  margin-top: auto;  /* pushes all content to bottom */  position: relative;  Transition: 0.5s;  transform: translateY(100%);}.thumb-Title {  text-transform: uppercase;  padding: 20px;  Transition: 0.5s;  transform: translateY(-100%);}.thumb-description {  padding: 10px 20px;  Transition: 0.5s;  opacity: 0;  flex: 1;}.thumb-author {  padding: 20px;  position: relative;}/* ANIMATE */.thumb:hover .thumb-anim {  transform: translateY(0);}.thumb:hover .thumb-Title {  transform: translateY(0%);}.thumb:hover .thumb-description {  opacity: 1;}

<div >  <div >    <img  src="http://placekitten.com/300/300" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title</h3>      <p >        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover      </p>    </div>    <div >Published by super long some Author</div>  </div>  <div >    <img  src="http://placekitten.com/400/300" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title</h3>      <p >        The row heights are dictated by the tallest in the horizontal group      </p>    </div>    <div >Published</div>  </div>  <div >    <img  src="http://placekitten.com/230/300" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title a super long Title here</h3>      <p >        Lorem ipsum dolor sit amet,consectetur adipisicing elit. Repellendus facilis beatae,numquam aliquam evenIEt. Iure porro provIDent itaque hic quae tempora. Quaerat doloribus dolore facilis similique,soluta asperiores quas sAPIente.      </p>    </div>    <div >Published by super long some Author</div>  </div>  <div >    <img  src="http://placekitten.com/270/300" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title</h3>      <p >        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover      </p>    </div>    <div >Published by super long some Author</div>  </div>  <div >    <img  src="http://placekitten.com/250/370" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title</h3>      <p >        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover      </p>    </div>    <div >Yep. Lorem ipsum dolor sit amet,consectetur adipisicing elit. CupIDitate sequi aspernatur cumque SAEpe incIDunt enim,nihil dolores ipsam numquam architecto velit labore quod laboriosam aliquam distinctio tempora unde ad totam.</div>  </div>  <div >    <img  src="http://placekitten.com/290/340" alt="Catz!">    <div ></div>    <div >      <h3 >The movIE Title</h3>      <p >        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover      </p>    </div>    <div >Published by super long some Author</div>  </div></div>

总结

以上是内存溢出为你收集整理的html-使用CSS从下至上对div进行动画处理 全部内容，希望文章能够帮你解决html-使用CSS从下至上对div进行动画处理 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。