Question

我希望当用户将鼠标悬停在图片或文字和图片上时，我们会尝试使用这个但只有一个比例

＆＃13;

<div class="top3" id="DSC0123"><a href=""><img src="images/DSC0123.png"></a></div>
<div class="top3" id="Layer4"><a href=""><img src="images/Layer4.png"></a></div>
<div class="top3" id="DSC0416"><a href=""><img src="images/DSC0416.png"></a></div>
<div class="top3" id="IMG0541"><a href=""><img src="images/IMG0541.png"></a></div>
<div class="top3 top3" id="DSC0331"><a href=""><img src="images/DSC03311.png"></a></div>
<div class="top1 top3" id="Food"><a href="">Food</a></div>
<div class="top1 top3" id="portrait"><a href="">Food</a></div>
<div class="top1 top3" id="LANSCAPES"><a href="">Food</a></div>
<div class="top1 top3" id="kids"><a href="">Food</a></div>
<div class="top1 top3" id="SPORTS"><a href="">Food</a></div>

＆＃13;

{{1}}

＆＃13;

Answer 1

在display上使用<a>并将鼠标悬停在<a>上，例如：

.top3 , .top1 {
  transition: all 1s ease;
}

.top3 a, .top1 a {
  display: inline-block;
  transition: all 1s ease;
}

.top3:hover a ,.top1:hover a {
  transform: scale(1.17);
  transform-origin: center;
}

请看下面的代码段：

＆＃13;

.top3 , .top1 {
  transition: all 1s ease;
}

.top3 a, .top1 a {
  display: inline-block;
  transition: all 1s ease;
}

.top3 a:hover ,.top1 a:hover {
  transform: scale(1.5);
  transform-origin: center;
}

＆＃13;

<div class="top3" id="DSC0123"><a href=""><img src="images/DSC0123.png"></a></div>
<div class="top3" id="Layer4"><a href=""><img src="images/Layer4.png"></a></div>
<div class="top3" id="DSC0416"><a href=""><img src="images/DSC0416.png"></a></div>
<div class="top3" id="IMG0541"><a href=""><img src="images/IMG0541.png"></a></div>
<div class="top3 top3" id="DSC0331"><a href=""><img src="images/DSC03311.png"></a></div>
<div class="top1 top3" id="Food"><a href="">Food</a></div>
<div class="top1 top3" id="portrait"><a href="">Food</a></div>
<div class="top1 top3" id="LANSCAPES"><a href="">Food</a></div>
<div class="top1 top3" id="kids"><a href="">Food</a></div>
<div class="top1 top3" id="SPORTS"><a href="">Food</a></div>

＆＃13;

希望这有帮助！

Answer 2

如果我理解正确，您希望图像在悬停时向上/向下缩放，而不是文本。您可以在不重复链接的情况下使用更少，更强大的代码来完成此操作。我做了一个示例来演示，并添加边框以方便。当然，你可以在悬停时做任何你喜欢的事情。我保持简单。

a {
display: block;
width: 300px;
height: 300px;

border: solid 1px red;
}

a img {
width: 300px;
height: 200px;
}

a span {
width: 300px;
height: 100px;

border: solid 1px green;
}

a:hover {
width: 600px;
height: 600px;
}

a:hover span {
width 600px;
}

a:hover img {
width: 600px;
height: 500px;
}


<a href="#"><img src="http://img05.deviantart.net/c135/i/2011/134/7/0/bridge_by_kzonedd-d3gcetc.jpg" alt="old wooden bridge" /><span>text</span></a>

Answer 3

用户希望BOTH缩放（img和文本）

您应该将文本div放在图像div中，如下所示：

 <div class="top3" id="DSC0123">
   <a href=""><img src="http://www.w3schools.com/css/trolltunga.jpg" /></a>
   <div class="top1 top3" id="Food">
    <a href="">Food</a>
   </div>
 </div>

https://jsfiddle.net/933ex7pv/2/（工作小提琴）

添加transform-origin: 0 0;（或您喜欢的其他一些值），使其在中心缩放。

当悬停在图像上或文本时两个比例

3 个答案: