Stellen div wie ein modalen Pop-out

Question

Im Moment habe ich ein Layout aus mehreren Reihen gemacht, mit 4 Spalten je. Jede Spalte enthält eine "Karte" mit einigen grundlegenden Informationen.

Wenn der Benutzer auf eine der Karten klickt, möchte ich einen Flip-Effekt, um seine Rückseite zu zeigen, die detailliertere Informationen enthält, sowie das Div animieren, um über alles andere, zentriert und größer zu gehen ich kann ohne brechen das Layout (wie eine Bootstrap modal anzeigen würde) viel mehr Text, und alles, was angezeigt werden soll.

Der Flip-Effekt funktioniert, aber ich kämpfe jetzt mit der div Art der Umwandlung in eine modale, a.k.a zentriert sich und zoomt in, ohne den Text zu skalieren, damit ich dort mehr Informationen einfügen kann.

Hier ist mein HTML-Code:

<div class="row"> 
    <div class="col s12 m3 center-align flip-container"> 
     <div class="flipper"> 
      <div class="front"> 
       <div class="card-panel teal" style="position:relative;"> 
        FRONT CARD TEXT 
       </div> 
      </div> 
      <div class="back"> 
       BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF 
      </div> 
     </div> 
    </div> 
</div> 

Jede Hilfe wird sehr geschätzt!

Answer 1

Vielleicht möchten Sie Bootstrap überprüfen, haben Modalverben. Else, benötigen Sie einen CSS, die aussehen wie modal machen und mit jQuery nur hinzufügen oder eine Klasse entfernen.