Bootstrap 3/jquery 2 - Expand toggled text area (overlay) when clicked

Question

I have a card with an image inside. Here is the JSFIDDLE DEMO . Basically I wish to do an action in 2 steps:

1. when hover on the image/card, a bootstrap text accordion is toggled. That works fine.

2. when I click on the "+" icon inside the txt that was just toggled, I would like the overlay to move upwards as if it was toggled even more in order to fill the whole card. I fail to implement this.

3. the cars stays the same like this. if the user clicks on the 'close icon', the overlay gets "toggled back".

To show you exactly how I wish it to behave, I have made a video GIF on imgur .

Note: On this video , you can't see my pointeR/mouse but it's when clicked on the "plus icon' that the text overlay "moves upwards" to the top.

How can I implement this effect in css/javascript/jquery ?

I am using bootstrap 3 and jquery 2.

Code

HTML

<div class="center jumbotron">

<div id="deal-zone">
      <ul class="cards-list">

  <li class="card 353">      
    <div class="card-content">        

      <div class="card-image">        
        <a href="/operations/thisiscool"></a>
          <figure>
          <a href="/operations/thisiscool">            
            <img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">           

            <!-- operation card's short details on 2-column view-->
            </a>
            <figcaption id="tek" class="card-short-info">
              <a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
              <a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                <i class="glyphicon glyphicon-plus detail-icon_353"></i>
               </a>            
              <div class="short-info-content">                
                <a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>                      
              </div>
            </figcaption>
          </figure>        
      </div>

    </div> 
       <div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
            <div class="infoSales">
                <a id="info" class="moreInfo"></a>
                this is the big details i want                
            </div>

      </div>


  </li>
 <!-- cards in the stream of deal -->
</ul>


  </div>

  </div>

CSS

#deal-zone {
  margin-top: 20px;  
}
#deal-zone ul {
    padding: 0;
  }
.cards-list {
  list-style: none;
  display: block;
  height: auto;
}
.card {
    width: 47%;
    display: inline-block;
    margin: 0 1% 21px 1%;//sum 49%
}
.card-content {
  background: #fff;
  position: relative;
}
.card-image {
  vertical-align: top;
  position: relative;
  line-height: 0;
  overflow: hidden;
  padding-bottom: 33.88%;

}
.card-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red; 
  }

.container .jumbotron {
  padding-left: 0px;
  padding-right: 0px;
}

.card-short-info {
  width: 100%;
  height: 13%;
  position: absolute; 
  color: #464650;
  padding: 0px 1em;
  font-size: 0.8em;
  background-color: grey;
  bottom:0; 
  display: none;    
}
.moreInfo {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  float: right; 
  font-size: 16px;
  line-height: normal;
  color: #464650;
}
.short-info-content {
  position:relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: left;  
}
.card-short-info a.dateSales {
  color: #464650;
}

Javascript

$(".card-image").hoverIntent({
            sensitivity:100,//sensitivity threshold (must be 1 or higher)    
            interval:100,//milliseconds for onMouseOver polling interval    
            timeout:100,//milliseconds delay before onMouseOut    
            over:function(){
              $('.card-short-info',this).slideToggle(100);
            },
            out:function(){
              $('.card-short-info',this).slideToggle(300);

            }
        });

Answer 1

Does this updated fiddle help?

https://jsfiddle.net/4dhkbg6j/1/

I created this CSS overlay and a class for a close button:

  #info-overlay {
  display:none;
  z-index:999;
  position:absolute;
  height:100%;
  width:100%;
  background-color:grey;
}

.close-overlay {
  float:right;
  padding:5px;
}

Under card-content I added the div for the overlay

 <div class="card-content">        
   <div id="info-overlay">
     <div class="close-overlay">
       <a>close</a>
     </div>
     some info some longer info and this is really long now i wonder how long it can get    
   </div>...

And finally some simple jQuery to show and hide the overlay.

$(".close-overlay").click(function(){
  $("#info-overlay").hide();
});

$("#plusbutton").click(function(){
  $("#info-overlay").show();
});

Now this can be cleaned up in terms of mixing classes and ids for elements because I'm sure you have more than one of these. You can also add some fancy animation but hopefully this gets you started in the right direction.