WordPress的图像调整大小悬停

Question

我有一个wordpress website，我想添加一些功能，我目前的主题不提供。我希望“页面”部分中的3幅图像缩小尺寸或切换到不同的图像（相同的内容，较小的分辨率），使其看起来更小，然后将其悬停在其上。我已经成功了自定义的HTML页面来实现这一点，添加的ID的图像，然后添加一个版本的这对我的style.css为每个图像

#techbutton { 
    display: block; 
    width: 125px; 
    height: 125px; 
    background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0; 
} 
#techbutton:hover { 
    background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0; 
} 
#techbutton span { 
    position: absolute; 
    top: -999em; 
} 

上传自定义HTML到我的服务器，我意识到而不是仅仅覆盖rafsk.co.uk的主页，它也覆盖了我所有子域名的主页。

那么我该如何做到这一点？

Answer 1

你可以使用CSS变换，这将是最简单的方式做到这一点，你可以将它应用于所有三个一类，而不是一个ID（应该仅每页使用一次）：

所以先给同一类的所有图像（是指实际的图像标签，像<img class="imageclass" src="blah.png" />），并在你的CSS使用：

.imageclass { 
    display: block; 
    width: 125px; 
    height: 125px; 
    transform: scale(1,1); 
} 
.imageclass:hover { 
    transform: scale(0.9,0.9); 
} 

，如果你想让它你可以再添加一个CSS过渡效果更顺畅：

.imageclass { 
    display: block; 
    width: 125px; 
    height: 125px; 
    transform: scale(1,1); 
    transition: transform 0.6s ease-in-out; 
} 
.imageclass:hover { 
    transform: scale(0.9,0.9); 
} 

这里是一个工作示例： https://jsfiddle.net/f9teea7L/

---

替代方案＃1： 如果您不能编辑HTML，只能得到一个图像到通过后台的股利，你可以尝试像这样添加一个背景大小的属性。要知道，虽然它不会在IE 8或以下工作：

#techbutton { 
    display: block; 
    background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922'); 
    background-size: 100%,100%; 
    width: 125px; 
    height: 125px; 
    transform: scale(1,1); 
    transition: transform 0.6s ease-in-out; 
} 
#techbutton:hover { 
    transform: scale(0.9,0.9); 
} 

工作实例：https://jsfiddle.net/azx962a9/

---

备选方案2： 我在您的网站看了看，但并如果我明白你想要做什么，在我看来，简单地添加到您的CSS应该工作...：

.service-icon { 
    transform: scale(1,1); 
    transition: transform 0.6s ease-in-out; 
} 
.service-icon:hover { 
    transform: scale(0.9,0.9); 
}