css - Animating tooltip fade in and out -
how can make tooltip show , hide fade? have tried add:
transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;
but no luck, here code
tooltip css:
.mainbuttoncontainer button:hover:after { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); border-color: #093466; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 7px 2px 2px; bottom: -5px; color: #093466; padding: 5px 15px; position: absolute; width: 113px; z-index: -1; }
html:
<button id=mgf_main1 type="button" onclick="loaddata(1)"> <img src="images/magof-icon.png" width="68" height="68"/> </button>
you need move describes element button:after
, , change properties change on hover in button:hover:after
.
fiddle
button:after { opacity: 0; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; content:''; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); border-color: #093466; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 7px 2px 2px; bottom: -5px; color: #093466; padding: 5px 15px; position: absolute; top:50px; left:70px; width: 113px; height: 30px; z-index: -1; } button:hover:after { opacity: 1; }
Comments
Post a Comment