问题描述
如何制作这张卡片,无论大小如何,只在悬停时显示下面的标题? 在标题中添加更多单词时,效果不佳。
bottomInfo();
$('.post-item').mouseleave(function(){
bottomInfo;
});
$('.post-item').mouseenter(function() {
$('.hero-item .post-info').css('bottom',0);
});
function bottomInfo() {
let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
postInfoHeight = '-' + postInfoHeight + 'px';
console.log(postInfoHeight);
$('.hero-item .post-info').css('bottom',postInfoHeight);
}
.hero-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
overflow: hidden;
position: relative;
width: 100%;
border-radius: 20px;
Box-shadow: 0px 13px 27px -5px rgba(0,0.25);
margin-top: 50px;
}
.hero-item::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,rgba(0,0.5),transparent);
}
.company-info {
display: flex;
align-items: center;
position: absolute;
bottom: 20px;
left: 20px;
width: 90%;
}
.company-info__logo {
width: 100%;
max-width: 60px;
min-width: 60px;
height: 60px;
border-radius: 50px;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
margin-right: 15px;
}
.company-info h3 {
color: #fff;
margin: 0;
line-height: 24px;
letter-spacing: 0.38px;
font-weight: 700;
font-size: 24px;
}
.item-2 {
height: auto;
display: flex;
flex-flow: column;
max-width: 338px;
min-height: 422px;
max-height: 422px;
top: -70px;
}
.item-2::before {
content: "";
width: 100%;
height: 60%;
position: relative;
background-image: none;
}
.item-2 .post-thumbnail {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: gray;
min-height: 100%;
padding-bottom: 125%;
transition: all 500ms ease-in-out;
}
.item-2 .post-thumbnail::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.item-2 .post-info {
padding: 19px 21px;
margin-top: auto;
margin-bottom: 0;
position: absolute;
bottom: -140px;
transition: all 500ms ease-in-out;
background: white;
width: 100%;
}
.item-2 .post-info h3 {
font-weight: 700;
color: #000;
line-height: 29px;
letter-spacing: 0.2px;
font-size: 24px;
margin-bottom: 20px;
}
.item-2 .post-info .post-info__arrow-link {
display: flex;
align-items: center;
}
.item-2 .post-info .post-info__arrow-link h5 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.38px;
color: royalblue;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;
}
.item-2 .post-info .post-info__arrow-link:hover h5 {
text-decoration: underline;
}
.item-2:hover .post-thumbnail {
padding-bottom: 86%;
}
@media (max-width: 1999px) {
.item-2:hover .post-thumbnail {
padding-bottom: 90%;
}
}
.item-2:hover .post-info {
bottom: 0;
}
.hero-item-option {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
overflow: hidden;
position: relative;
width: 100%;
border-radius: 20px;
Box-shadow: 0px 13px 27px -5px rgba(0,0.25);
margin-top: 50px;
}
.hero-item-option::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.company-info {
display: flex;
align-items: center;
position: absolute;
bottom: 20px;
left: 20px;
width: 90%;
}
.company-info__logo {
width: 100%;
max-width: 60px;
min-width: 60px;
height: 60px;
border-radius: 50px;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
margin-right: 15px;
}
.company-info h3 {
color: #fff;
margin: 0;
line-height: 24px;
letter-spacing: 0.38px;
font-weight: 700;
font-size: 24px;
}
.item-2-option {
height: auto;
display: flex;
flex-flow: column;
max-width: 338px;
min-height: 422px;
max-height: 422px;
top: -70px;
}
.item-2-option::before {
content: "";
width: 100%;
height: 60%;
position: relative;
background-image: none;
}
.item-2-option .post-thumbnail {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: gray;
min-height: 100%;
padding-bottom: 125%;
transition: all 500ms ease-in-out;
}
.item-2-option .post-thumbnail::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.item-2-option .post-info {
padding: 19px 21px;
margin-top: auto;
margin-bottom: 0;
position: absolute;
bottom: -140px;
transition: all 500ms ease-in-out;
background: white;
width: 100%;
}
.item-2-option .post-info h3 {
font-weight: 700;
color: #000;
line-height: 29px;
letter-spacing: 0.2px;
font-size: 24px;
margin-bottom: 20px;
}
.item-2-option .post-info .post-info__arrow-link {
display: flex;
align-items: center;
}
.item-2-option .post-info .post-info__arrow-link h5 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.38px;
color: royalblue;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;
}
.item-2-option .post-info .post-info__arrow-link:hover h5 {
text-decoration: underline;
}
.item-2-option:hover .post-thumbnail {
padding-bottom: 86%;
}
@media (max-width: 1999px) {
.item-2-option:hover .post-thumbnail {
padding-bottom: 90%;
}
}
.item-2-option:hover .post-info {
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-item item-2 post-item">
<div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
<div class="company-info">
<div class="company-info__logo" style="background-color:gray;"></div>
<h3 style="color: white">My title</h3>
</div><!--company-info-->
</div><!--post-thumbnail-->
<div class="post-info">
<h3 class="post-title">This is my title post testing for large title of the post and This is my title post testing
</h3>
<span class="post-info__arrow-link">
<h5>Read their story</h5>
</span>
</div><!--post-info-->
</div>
<br>
<div class="hero-item-option item-2-option post-item-option">
<div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
<div class="company-info">
<div class="company-info__logo" style="background-color:gray;"></div>
<h3>My title</h3>
</div><!--company-info-->
</div><!--post-thumbnail-->
<div class="post-info">
<h3 class="post-title">This is my title post testing
</h3>
<span class="post-info__arrow-link">
<h5>Read their story</h5>
</span>
</div><!--post-info-->
</div>
无论标题大小如何,它都应该用作第二张卡片。请帮助我!!!
解决方法
Hopefully it works for you!
我已经删除了 hero-item 和 company-info__logo 类并添加了悬停属性。提供的链接可以帮助您codepen
bottomInfo();
$('.post-item').mouseleave(function(){
bottomInfo;
});
$('.post-item').mouseenter(function() {
$('.hero-item .post-info').css('bottom',0);
});
function bottomInfo() {
let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
postInfoHeight = '-' + postInfoHeight + 'px';
console.log(postInfoHeight);
$('.hero-item .post-info').css('bottom',postInfoHeight);
}bottomInfo();
$('.post-item').mouseleave(function(){
bottomInfo;
});
$('.post-item').mouseenter(function() {
$('.hero-item .post-info').css('bottom',postInfoHeight);
}
.hero-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
/* overflow: hidden; */ //Removed
position: relative;
width: 100%;
border-radius: 20px;
box-shadow: 0px 13px 27px -5px rgba(0,0.25);
margin-top: 50px;
}
.hero-item::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,rgba(0,0.5),transparent);
}
.company-info {
display: flex;
align-items: center;
position: absolute;
bottom: 20px;
left: 20px;
width: 90%;
}
.company-info__logo {
width: 100%;
max-width: 60px;
min-width: 60px;
height: 60px;
border-radius: 50px;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
/* overflow: hidden; */ //Removed
margin-right: 15px;
}
.company-info h3 {
color: #fff;
margin: 0;
line-height: 24px;
letter-spacing: 0.38px;
font-weight: 700;
font-size: 24px;
}
.item-2 {
height: auto;
display: flex;
flex-flow: column;
max-width: 338px;
min-height: 422px;
max-height: 422px;
top: -70px;
}
.item-2::before {
content: "";
width: 100%;
height: 60%;
position: relative;
background-image: none;
}
.item-2 .post-thumbnail {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: gray;
min-height: 100%;
padding-bottom: 125%;
transition: all 500ms ease-in-out;
}
.item-2 .post-thumbnail::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.item-2 .post-info {
padding: 19px 21px;
margin-top: auto;
margin-bottom: 0;
position: absolute;
bottom: -140px;
transition: all 500ms ease-in-out;
background: white;
width: 100%;
}
.item-2 .post-info h3 {
font-weight: 700;
color: #000;
line-height: 29px;
letter-spacing: 0.2px;
font-size: 24px;
margin-bottom: 20px;
}
.item-2 .post-info .post-info__arrow-link {
display: flex;
align-items: center;
}
.item-2 .post-info .post-info__arrow-link h5 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.38px;
color: royalblue;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;
}
.item-2 .post-info .post-info__arrow-link:hover h5 {
text-decoration: underline;
}
.item-2:hover .post-thumbnail {
padding-bottom: 86%;
}
@media (max-width: 1999px) {
.item-2:hover .post-thumbnail {
padding-bottom: 90%;
}
}
.item-2:hover .post-info {
bottom: 0;
}
.hero-item-option {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
overflow: hidden;
position: relative;
width: 100%;
border-radius: 20px;
box-shadow: 0px 13px 27px -5px rgba(0,0.25);
margin-top: 50px;
}
.hero-item-option::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.company-info {
display: flex;
align-items: center;
position: absolute;
bottom: 20px;
left: 20px;
width: 90%;
}
.company-info__logo {
width: 100%;
max-width: 60px;
min-width: 60px;
height: 60px;
border-radius: 50px;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
margin-right: 15px;
}
.company-info h3 {
color: #fff;
margin: 0;
line-height: 24px;
letter-spacing: 0.38px;
font-weight: 700;
font-size: 24px;
}
.item-2-option {
height: auto;
display: flex;
flex-flow: column;
max-width: 338px;
min-height: 422px;
max-height: 422px;
top: -70px;
}
.item-2-option::before {
content: "";
width: 100%;
height: 60%;
position: relative;
background-image: none;
}
.item-2-option .post-thumbnail {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: gray;
min-height: 100%;
padding-bottom: 125%;
transition: all 500ms ease-in-out;
}
.item-2-option .post-thumbnail::before {
content: "";
width: 100%;
height: 60%;
position: absolute;
left: 0;
bottom: 0;
background-image: linear-gradient(to top,transparent);
}
.item-2-option .post-info {
padding: 19px 21px;
margin-top: auto;
margin-bottom: 0;
position: absolute;
bottom: -140px;
transition: all 500ms ease-in-out;
background: white;
width: 100%;
}
.item-2-option .post-info h3 {
font-weight: 700;
color: #000;
line-height: 29px;
letter-spacing: 0.2px;
font-size: 24px;
margin-bottom: 20px;
}
.item-2-option .post-info .post-info__arrow-link {
display: flex;
align-items: center;
}
.item-2-option .post-info .post-info__arrow-link h5 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.38px;
color: royalblue;
margin-right: 10px;
margin-top: 0;
margin-bottom: 0;
}
.item-2-option .post-info .post-info__arrow-link:hover h5 {
text-decoration: underline;
}
.item-2-option:hover .post-thumbnail {
padding-bottom: 86%;
}
@media (max-width: 1999px) {
.item-2-option:hover .post-thumbnail {
padding-bottom: 90%;
}
}
.item-2-option:hover .post-info {
bottom: 0;
}
/*Added*/
.hero-item {
position: relative;
transition: all 0.3s linear;
}
.hero-item:hover .company-info__logo {
display: block;
position: relative;
margin-top: -177px;
}
.hero-item .company-info h3:hover {
display: block;
position: relative;
padding-top: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-item-option item-2-option post-item-option">
<div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
<div class="company-info">
<div class="company-info__logo" style="background-color:gray;"></div>
<h3>My title</h3>
</div><!--company-info-->
</div><!--post-thumbnail-->
<div class="post-info">
<h3 class="post-title">This is my title post testing
</h3>
<span class="post-info__arrow-link">
<h5>Read their story</h5>
</span>
</div><!--post-info-->
</div>
<br>
<div class="hero-item-option item-2-option post-item-option">
<div class="post-thumbnail" style="background-image: url(https://media-exp1.licdn.com/dms/image/C561BAQFI5wJjW5WlTg/company-background_10000/0?e=2159024400&v=beta&t=SYZsgalRv78KV0nCa9Xf_e5yAL6de8hKAwnHiP5THzU);">
<div class="company-info">
<div class="company-info__logo" style="background-color:gray;"></div>
<h3>My title</h3>
</div><!--company-info-->
</div><!--post-thumbnail-->
<div class="post-info">
<h3 class="post-title">This is my title post testing
</h3>
<span class="post-info__arrow-link">
<h5>Read their story</h5>
</span>
</div><!--post-info-->
</div>