WordPress image resize on hover

Question

У меня есть wordpress website, и я хотел бы добавить некоторые функции, которые моя текущая тема не предлагает. Я хотел бы, чтобы 3 изображения в разделе «Страницы» уменьшали размер или переключались на другое изображение (такое же содержимое, меньшее разрешение), чтобы отображаться меньше, чем наводиться на него. Я сумел сделать это с помощью пользовательского HTML страницы, добавляя идентификаторы к изображениям, а затем добавление версии это мой 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 преобразования, который был бы самым простым способом, и вы можете применить его ко всем трем с классом, а не идентификатор (который должен быть использован только один раз на странице):

Таким образом, первые дают один и тот же класс для всех изображений (то есть до фактического тега изображения, как <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 и может получить только изображение в DIV с помощью фона, вы можете попробовать добавив свойство фона такого размера. Имейте в виду, однако, что он не будет работать в 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); 
}