I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html
I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:
My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.
<div class="row"> <div class="span4"> <section id="btn"> <p>Some Text Will Go Here</p> <div id="under"> <div class="logo"><div class="recto"><a href="#" class="consumer"><i class="fa fa-user"></i>Consumer</a></div></div> <div class="top"></div> <div class="logo verso"></div> </div> <div id="shadow"></div> </section> </div> </div>
Looks a lot better with
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.