WordPress image resize on hover - html

Question

I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#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;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?

Answer 1

You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.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);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#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);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}