我在这里有一个问题,如果标题太长,如果它超出一行,则会导致后面的元素无法正确浮动.我想拥有它,所以无论标题的内容如何,下一行都会调整到空格.我看到另一个网站实现了非常相似的东西.
我无法解决我需要的其他问题.
body {
padding: 0;
margin: 0 auto;
}
.container:after, .group:before, .group:after, .clearfix:before, .clearfix:after, .row:before, .row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.container:after, .row:after, .clearfix:after, .group:after {
clear: both;
}
.row, .clearfix, .group {
zoom: 1;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
color: #000;
background: #FFF
}
.column {
float: left;
display: block
}
.constraint …我有一些包含图像和文本的 flex 框。
.bItem {
display: flex;
display: block;
justify-content: flex-end;
flex-direction: column;
position: absolute;
top: 0;
right: 9px;
bottom: 0;
left: 9px;
padding: 18px;
background-size: cover;
background-position: center center;
}
HTML：
<div class="box">
<a class="bItem" href="/about/" style="background-image:url(/images/one.jpg);" >
<div class="bText white">
<h3>TITLE</h3>
Additional text here.</div>
</a>
</div>
我假设这样的事情，附加到.bItem会工作：
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
有没有办法可以将它附加到.bItem，最好不必添加另一个类？
我遇到的问题是文本难以阅读，带有白色文本，底部的黑色渐变将有助于使其更清晰。
我有一些 CSS3 悬停效果来为图像标题添加动画效果：
.imageDetails {
width: 100%;
height: 360px;
position: absolute;
bottom: -100px;
opacity: 0;
color: white;
background-color: black;
}
.item:hover .imageDetails {
bottom: 0;
-webkit-transition: all 0.5s, -webkit-transform 0.5s;
transition: all 0.5s, transform 0.5s;
width:100%;
height: 330px;
opacity:1;
}
.readMoreLink {
color:#ACACAC;
opacity: 0;
text-align: center;
}
.item:hover .readMoreLink {
-webkit-transition-duration: 2s; /* Safari */
-webkit-transition-delay: 1s; /* Safari */
transition-duration: 2s;
transition-delay: 1s;
opacity: 1;
}
在hover它上面工作是一种享受，但在鼠标移开时只是清除。我也想让它滑出来。
我尝试使用以下内容，但行为不当。
.item:hover .imageDetails:not( :hover ){
bottom: -100px;
-webkit-transition: all …