当悬停在图像或文本上时

Question

当用户将鼠标悬停在图像或文本以及图像scale上时，我想要

 .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

在<a>上使用display并将鼠标悬停在<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> 

希望这可以帮助！

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

用户希望两者都缩放（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; （或您喜欢的其他一些值）以使其居中缩放。