Skip to content
Fix Code Error

How to show title in hover – css / jquery

June 24, 2021 by Code Error
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.

_x000D_

_x000D_

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_

  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

_x000D_

_x000D_

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

Related Articles

  • Navbar not filling width of page when reduced to mobile view
  • VueJS masonry layout
  • How do you get string interpolation working on a javascript…
  • Fix top buttons on scroll of list below
  • Active tab issue on page load HTML
  • Increasing size of semi circle using css
  • Adobe XD to responsive html
  • Is it possible to apply CSS to half of a character?
  • Having trouble with my nav bar/header, It used to work but…
  • CSS Input with width: 100% goes outside parent's bound

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Simple way to add extra parameter to Automapper ForMember

Next Post:

How can I update specific parts of a text file in java?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error