画像やテキスト上のホバー両規模

Question

iが画像上のユーザーホバーまたはテキストと画像scale.iがこれを試みたが、一つだけのスケール

.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

ユーザーの両方が（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;（または好きな他の値）を追加して、中央で縮尺を変更します。

Answer 2

たときたいです見た目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; 
} 

：<a>にdisplayを使用して<a>にホバーを適用する、などの以下のスニペットトン：

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

私が正しく理解していれば、画像はホバー上で上下に拡大縮小したいが、テキストは拡大しないようにする。リンクを複製することなく、より少ない、より堅牢なコードでこれを行うことができます。私はデモの例を作り、簡単に境界線を追加しました。もちろん、ホバーで好きなことをすることができます。私はそれを簡単に保った。

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>