我希望span标记有转换。
<div id="lorem1"><img src="http://www.lorempixum.com/100/100/" />
<span><!-- this one here should smoothly grow... -->
<strong>LOREM!</strong><br />
<span class="infotext">Lorem ipsum</span>
</span>
</div>
看看这个小提琴:https://jsfiddle.net/mnvbsLe0/
答案 0 :(得分:2)
我已经对您的CSS文件进行了更改,但它确实有效。
使用下面提到的CSS
覆盖你的css.ausflug-themen {
display: flex;
flex-wrap: wrap;
overflow:hidden;
}
.ausflug-themen > div {
position: relative;
margin: 5px;
}
.ausflug-themen > div > span {
position: absolute;
left: 0;
bottom: 0px;
border: 100px;
background-color: rgba(0,0,0,.5);
width: 80px;
color: #fff;
padding: 10px;
font-size: 1.3em;
height: 20px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
span.infotext {
height:0;
color: #fff;
}
.ausflug-themen > div:hover > span {
height: 80px;
}
答案 1 :(得分:1)
进行转换时,存在转换前状态和转换后状态。你的转换前状态有一个高度(.ausflug-themen&gt; div&gt; span)你的转换后的高度为auto。你必须指定确切的高度而不是auto,因为浏览器没有如何从A点转换:高度20 px到B点:auto。
Before-transition:
.ausflug-themen > div > span {
position: absolute;
left: 0;
bottom: 0px;
border: 100px;
background-color: rgba(0,0,0,.5);
width: 80px;
color: #fff;
padding: 10px;
font-size: 1.3em;
height: 20px;
transition: height 2.0s;
}
After-transition:
.ausflug-themen > div:hover > span {
cursor: default;
height: auto;
}