Css 动画工具提示淡入淡出

如何使此工具提示以淡入淡出的方式显示和隐藏？我试图补充：

transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

但如果运气不好，这是我的密码

工具提示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:after，并且只更改在button:hover:after中悬停时更改的属性

---

您需要将描述元素的所有内容移动到button:after，并且只更改在button:hover:after中悬停时更改的属性

---

您可以为此创建一个JSFIDLE吗？您需要在hover和default状态中包含转换。另外，转换代码说不透明度将转换，但是您还需要设置/更改hover上的不透明度属性。您可以为此创建一个JSFIDLE吗？您需要在hover和默认状态下都包含转换。此外，转换代码表示“不透明度”将转换，但您还需要在“悬停”上设置/更改“不透明度”属性

<button  id=mgf_main1 type="button" onclick="loadData(1)">
    <img src="Images/Magof-Icon.png" width="68" height="68"/>
</button>

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;    
}