在这种情况下,我有一些从WordPress生成的投资组合元素。 我想在每个元素的底部显示标题,但在其下方有一些重叠(溢出:可见)和隐藏的描述。
如果我将鼠标悬停在元素上,则标题和隐藏的描述将可见并在元素内向上滑动。
我要战斗的地方是隐藏的描述,该描述只在元素内可见。 在我的“解决方案”中,添加标题的克隆并将其隐藏在悬停时。 但这并不顺利。您将如何实现这种行为?
$(".element").append(
$(".title")
.clone()
.removeClass("title")
.addClass("title-inject")
);
body {
background-color: black;
}
a {
font-family: Georgia;
font-size: 20pt;
text-decoration: none;
color: white;
font-style: italic;
font-weight: bold;
padding-left: 15px;
display: block;
background-color: none;
}
.element {
overflow: visible;
display: inline-block;
position: relative;
}
.inner {
height: 150px;
width: 300px;
position: relative;
background-color: green;
overflow: hidden;
}
.image {
display: block;
width: 100%;
height: 100%;
background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
}
.element:hover .post-text {
transform: translateY(-100%);
transition: all 700ms ease-out;
}
.element:hover .title-inject {
transition: all 0.1s ease;
visibility: hidden;
opacity: 0;
}
.title {
margin-bottom: -6px;
}
.title-inject {
position: absolute;
bottom: -6px;
left: 0;
right: 0;
}
.text {
font-family: arial;
color: lightgrey;
background-color: #0009;
padding: 13px;
border-radius: 15px 15px 0px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
<div class="inner">
<div class="image"></div>
<div class="post-text">
<div class="title">
<a href="">title237</a>
</div>
<div class="text">
is simply dummy text of the printing and typesetting
</div>
</div>
</div>
答案 0 :(得分:0)
您可以更改逻辑并在文本上应用高度动画,这样就可以保持溢出可见:
body {
background-color: black;
}
a {
font-family: Georgia;
font-size: 20pt;
text-decoration: none;
color: white;
font-style: italic;
font-weight: bold;
padding-left: 15px;
display: block;
background-color: none;
}
.inner {
height: 150px;
width: 300px;
position: relative;
background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
background-color: green;
display: inline-block;
}
.post-text {
position:absolute;
bottom:0;
left:0;
right:0;
}
.title {
margin-bottom: -6px;
}
.text {
font-family: arial;
color: lightgrey;
background-color: #0009;
border-radius: 15px 15px 0px 0px;
max-height:0;
overflow:hidden;
transition:max-height 700ms ease-out;
}
.text p {
padding:13px;
margin:0;
}
.inner:hover .text {
max-height:100px;
}
<div class="inner">
<div class="post-text">
<div class="title">
<a href="">title237</a>
</div>
<div class="text">
<p>is simply dummy text of the printing and typesetting</p>
</div>
</div>
</div>