javascripthtmljquerycssjquery-hover

How to show title in hover - css / jquery

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);
}
.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;
}
<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>

  1. 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.

  2. 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);
}
    .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;
}
    <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>