How to show title in hover – css / jquery
Posted By: Anonymous
How to show title in hover – CSS / jquery
How could I make this card that only when hovering shows the title below regardless of the size?
When more words are added in the title, it does not work well.
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);
}
_x000D_
.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, 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, 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, rgba(0, 0, 0, 0.5), 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, 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, rgba(0, 0, 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-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, rgba(0, 0, 0, 0.5), 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;
}
_x000D_
<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>
_x000D_
_x000D_
_x000D_
-
I tried to get the height of that div **. Post-info ** with jquery and then give it that negative bottom so that the title is not visible when it has not been hovered, but then when it is mouseleave the title is no longer hidden.
-
Also when the title is large, the image is not complete, the title is over it.
It should work as the second card regardless of the size of the title. PLEASE HELP ME!!!
Solution
Hopefully it works for you!
I have been removed hero-item and company-info__logo classes and added hover properties. link provided which helps you 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', 0);
});
function bottomInfo() {
let postInfoHeight = $('.hero-item .post-info').outerHeight(true);
postInfoHeight = '-' + postInfoHeight + 'px';
console.log(postInfoHeight);
$('.hero-item .post-info').css('bottom', postInfoHeight);
}
_x000D_
.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, 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, 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, rgba(0, 0, 0, 0.5), 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, 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, rgba(0, 0, 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-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, rgba(0, 0, 0, 0.5), 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;
}
_x000D_
<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>
_x000D_
_x000D_
_x000D_
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.