Question

我有一个wordpress website，我想添加一些当前主题不提供的功能。我希望“页面”部分中的3个图像缩小尺寸或切换到不同的图像（相同内容，较小的分辨率），以便在您将鼠标悬停在其上时显得更小。我已经设法通过自定义HTML页面完成此操作，将ID添加到图像，然后将其版本添加到我的style.css中，用于每个图像

$link1 = "http://www.lubbo-zone.nl/script2/?name=iChris.";

    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $link1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($ch);

    echo curl_errno($ch) . '<br/>';
    echo curl_error($ch) . '<br/>';

    var_dump ($response);

将自定义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并且只能通过背景将图像放入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);
}

WordPress图像在悬停时调整大小

1 个答案: