css - 将鼠标悬停在图像上时更改为另一图像？

Question

基本上我想要的是能够使图像旋转 360 度并放大图像，我已经有了这两个。

我现在需要做的是，弄清楚如何实际使其旋转 360 度并放大到不同的图像，这是我拥有的 css:

.rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    cursor: crosshair
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);
}

这段代码工作正常，我需要知道的是如何使它变成不同的图像。

Answer 1

如果您可以使用<div>使用背景图像而不是实际的 <img>你可以用 css 很容易地做到这一点。

<强> Working Example

.rotate {
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
    height: 100px;
    width:100px;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate:hover {
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
    cursor: crosshair;
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);
}