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