Html 悬停时调整WordPress图像大小

我有一个新的主题，我想添加一些我当前的主题没有提供的功能。我希望“页面”部分中的3幅图像缩小或切换到不同的图像（相同的内容，更小的分辨率），以便在您将鼠标悬停在上面时显示得更小。我已经通过一个自定义HTML页面实现了这一点，将ID添加到图像中，然后为每个图像向my 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的主页，还覆盖了我所有子域的主页

---

那么我该怎么做呢？

您可以通过css转换来实现这一点，这是最简单的方法，您可以通过类而不是id（每页只能使用一次）将其应用于所有三个方面：

因此，首先将相同的类赋予所有图像（对实际图像标记的含义，如

），并在css中使用：

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

如果希望css过渡效果更平滑，则可以添加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);
}

以下是一个工作示例：

---

备选方案#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);
}

工作示例：

---

备选方案#2: 我看过你的网站，如果我了解你想做什么，我觉得简单地把它添加到你的css中应该会有用…：

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

---

这似乎是个好主意，唯一的问题是我自己不能编辑HTML，因为它基于WordPress主题。所以我无法将类添加到图像中。很抱歉，我花了这么长时间才看到这个。您可以尝试升级CSS级联，而不是添加类。因此，您可以使用

#techbutton img

和

#techbutton img:hover

或者如果出于某种原因必须使用图像作为背景，您可以尝试使用

background size

css属性。。。我将用可能的解决方案编辑上面的答案。