html - 当悬停在图像或文本上时，两者都会缩放

Question

我想要当用户将鼠标悬停在图像或文本和图像比例上时。我试过这个但只有一个比例

.top3 , .top1 {
transition: all 1s ease; 
}
.top3:hover ,.top1:hover {
transform: scale(1.17);
}

<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>

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;
}

看看下面的片段:

.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;
}

<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>

希望这对您有所帮助!