Expanding a div (that has a hover flipping effect) on click

Question

I'm trying to add an action to a clicked div that only appears when hovered (it's the "back side" of a flipping div, which is orange in the example below).

The action I'm trying to trigger is expanding the orange div so it covers all the other divs.

This is the code I'm having an issue with: http://jsfiddle.net/y892fqq1/2/

 table { width: 200px; height: 200px; border-collapse: collapse; } .front, .back, .flip, .flip-container { height: 100%; width: 100%; } .flip-container { perspective: 1000; } .flip-container:hover .flip, .flip-container.hover .flip { transform: rotateY(180deg); } .flip { transition: 1s; transform-style: preserve-3d; position: relative; } .front, .back { top: 0; left: 0; backface-visibility: hidden; position: absolute; } .front { z-index: 2; transform: rotateY(0deg); background-color: purple; } .back { transform: rotateY(180deg); background-color: orange; } 

 <div class="content"> <table> <tr> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back" onclick="expand()"></div> </div> </div> </td> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back" onclick="expand()"></div> </div> </div> </td> </tr> <tr> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back" onclick="expand()"></div> </div> </div> </td> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back" onclick="expand()"></div> </div> </div> </td> </tr> </table> </div> 

(Sorry for the long lines of codes!)

Here's a post I found that fits the most to my issue : https://stackoverflow.com/a/15489601 (shortcut to code: http://jsfiddle.net/85mJN/4/ ), but when I try that, it doesn't seem to work ...

Does anyone have any idea how I could proceed?

Many thanks, Adrian

Answer 1

how about adding a class on click, which will style the rotating thing accordingly?

 $(function(){ $(".flip").click(function(){ $(this).toggleClass("expanded"); }); }); 

 *{ margin:0; } .expanded{ transition: 0s !important; width:200px !important; height:200px !important; z-index:10 !important; position:absolute !important; transform: rotateY(180deg); } table { width: 200px; height: 200px; border-collapse: collapse; } .front, .back, .flip, .flip-container { height:100%; width:100%; left:0; top:0; } .flip-container { perspective: 1000; } .flip-container:not(.expanded):hover .flip, .flip-container.hover .flip { transform: rotateY(180deg); } .flip { transition: 1s; transform-style: preserve-3d; position: relative; } .front, .back { top: 0; left: 0; backface-visibility: hidden; position: absolute; } .front { z-index: 2; transform: rotateY(0deg); background-color:purple; } .back { transform: rotateY(180deg); background-color:orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <table> <tr> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back"></div> </div> </div> </td> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back"></div> </div> </div> </td> </tr> <tr> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back"></div> </div> </div> </td> <td> <div class="flip-container"> <div class="flip"> <div class="front"></div> <div class="back"></div> </div> </div> </td> </tr> </table> </div>