Bootstrap 3/jquery 2 - Erweitern getoggten Textbereich (Overlay) beim Klicken

Question

Ich habe eine Karte mit einem Bild im Inneren. Hier ist die JSFIDDLE DEMO. Grundsätzlich wünsche ich eine Aktion in zwei Schritten vor:

1. wenn Schweben auf dem Bild/Karte, ein Bootstrap-Text Akkordeon umgeschaltet wird. Das funktioniert gut.

2. Wenn ich auf das "+" Symbol in dem gerade getoggten txt klicke, möchte ich das Overlay nach oben bewegen, als ob es noch mehr getoggelt wäre, um die ganze Karte zu füllen. Ich kann das nicht implementieren.

3. die Autos bleiben die gleichen wie diese. Wenn der Benutzer auf das Symbol "Schließen" klickt, wird die Überlagerung "zurückgeschaltet".

Ihnen genau zu zeigen, wie ich es wünschte, zu verhalten, ich habe a video GIF on imgur gemacht.

. Hinweis: Auf diesem Video können Sie nicht meine Zeiger/Maus sehen, aber es ist, wenn auf dem „Plus-Symbol‘, dass der Text-Overlay ‚geklickt bewegt sich nach oben‘ nach oben

Wie kann ich das umsetzen Effekt in CSS/JavaScript/jQuery?

ich verwende Bootstrap 3 und 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

Hat diese aktualisierte Geige Hilfe?

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

Ich habe diese CSS-Overlay und eine Klasse für eine Schließen-Schaltfläche:

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

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

Unter card-content ich die div für das 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>... 

Und schließlich einige einfache jQuery hinzugefügt um das Overlay ein- und auszublenden.

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

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

kann dies nun in Bezug auf die Misch Klassen und IDs für Elemente bereinigt werden, da bin ich sicher, dass Sie mehr als eins von diesen haben. Sie können auch einige schicke Animationen hinzufügen, aber das bringt Sie hoffentlich in die richtige Richtung.