Css 改变背景图像和内容的悬停效果

我是haml/css的新手，我想知道是否有可能做到以下几点： 有一个上面有一个很棒的字体图标的图像。然后，在悬停效果上，更改图像并显示一些文本，而不是图标。 图像可以被视为背景图像，但我不能确定其余部分。

哈默：

css:

---

这只是解决了悬停效果的一部分，但它没有显示我的图标。我甚至没有从悬停的文本开始。。我通过以下操作修复了它（以防其他人感兴趣）

这是我的哈默：

.dot
        %i.fa.fa-list-ul
        .read_more Text on hover

这是我的css：

.dot{
    display: inline-block;
    background-image: url(../assets/blue.png);
    width: 29%;
    height: 102px;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot i{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot .read_more{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}

.dot:hover{
    background: url(../assets/hover.png);
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -moz-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}

.dot:hover i{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s; 
    transition: all 1s;
}

.dot:hover .read_more{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}

使用-moz和-webkit是为了在所有浏览器上都受支持。 过渡：都是1，表示过渡的效果应适用于所有元素，并设置时间以确定进行过渡所需的时间

---

不透明度仅用作可见性：隐藏/可见，但为了使用转换属性，必须将其更改为不透明度。

给出一些您确实尝试过的代码。我已经编辑了我的问题。您可以为我们提供一个演示吗？我已经修复了它。因为我的声誉得分，我只想等到明天再发。

.dot
        %i.fa.fa-list-ul
        .read_more Text on hover

.dot{
    display: inline-block;
    background-image: url(../assets/blue.png);
    width: 29%;
    height: 102px;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot i{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}
.dot .read_more{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}

.dot:hover{
    background: url(../assets/hover.png);
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -moz-transition: all 1s;
    transition: all 1s;
    cursor: pointer;
}

.dot:hover i{
    opacity: 0;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s; 
    transition: all 1s;
}

.dot:hover .read_more{
    opacity: 1;
    -moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: all 1s;
    transition: all 1s;
}