<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-lg-4"> <h2>CSS trick is called <font color=gray>'anicon'</font></h2> <p>Adjust animation to fit your tastes. Tested in Firefox, Chrome and Chromium only.</p> <ul class="list-disc"> <h3>Icon hides behind any div. Examples are:</h3> <li>A - Three inputs [type=submit] in table rows. Icon pops to the left.</li> <li>B - And a double bounce out that will animate two separate icons per your choice. (war or peace?)</li> </ul> </div> <!-- animated icons behind input control --> <div class="col-lg-4 text-center"> <h2>A</h2> <form action="" method="POST" name="respond-edit" id="respondForm"> <table class="table table-striped table-condensed"> <tr><td> <div class="input-group"> <div id="anicon"> <i class="fa fa-edit anicon animate"></i> <span class="overcast"><input type="submit" class="det-list-anchor" name="submit_edit" value="Edit"></span> </div> </div> </td></tr> <tr><td> <div class="input-group"> <div id="anicon"><i class="fa fa-trash-o anicon animate"></i> <span class="overcast"><input type="submit" class="det-list-anchor" name="submit_edit" value="Delete"></span> </div> </div></td></tr> <tr><td> <div class="input-group"> <div id="anicon"><i class="fa fa-plus anicon animate"></i> <span class="overcast"><input type="submit" class="det-list-anchor" name="submit_edit" value="Approve"></span> </div> </div> </td></tr></table> </form> </div> <!-- aminated pull outs change on hover --> <div class="col-lg-4 text-center"> <h2>B</h2> <ul class="list-unstyled" id="boxed-in"> <li id="anicon"><i class="fa fa-plus anicon animate bgg"></i> <span class="overcast"><p class="wall">peace</p></span></li> <li id="anicon"><i class="fa fa-minus anicon animate bgr"></i> <span class="overcast"><p class="wall">wars!</p></span></li> </ul> </div> </div> </div>

body { font-family: sans-serif; background-color: rgb(255, 255, 255); margin-top: 50px; font-size: inherit; font-size: 1em; font-size: 16px; } i.fa { color: #739993; background-color: #fafafa; padding: 2px; border-radius: 3px; box-shadow: 0 0 2px #888; margin-right: 5px; } ul#boxed-in { list-style: none; margin: 0 auto; position: relative; background: #eeffff; padding: 0; } li#anicon i.fa { margin-left: 2px; opacity: 0; } li#anicon:hover i.fa { opacity: 1; } .fa.bgr { background: #ffaaa0 !important; } .fa.bgg { background: #a0ffaa !important; } .wall { position: relative; top: -5px; min-width: 45px; padding: 1px 4px; display: block; height: 28px; margin: 5px 0 0 1px; /* margin left determines how hidden the icon is */ background-image: linear-gradient(#fefefe, #f3f3f3); border: thin solid #e1e1e1; } .wall:hover { cursor: pointer; } .det-list-anchor { /* there is nothing special about this 'button' - using Boot buttons is perfectly fine for anicons */ min-width: 42px; height: 1.67em; padding: 1px 5px; background-image: linear-gradient(#efefef, #fcfcfc, #e4e4e4); margin:0; border: thin solid #ddd; border-radius:4px; } .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #anicon { width: auto; display:table-cell; } #anicon .anicon { position: absolute; top: 3px; left: 30px; color: transparent; /* same as opacity 0 or visibility hidden */ } .overcast { /* overcast is your parent span inside of anicon id div that is over top of icons */ position: relative; left: 20px; } #anicon:hover .anicon { color: inherit; left: 0; }