when hover on image or text the both scale - html

Question

i want when the user hover on the image or the text and the image scale.i have tried this but only one scale
.top3 , .top1 {
transition: all 1s ease;
}
.top3:hover ,.top1:hover {
transform: scale(1.17);
}
<div class="top3" id="DSC0123"><img src="images/DSC0123.png"></div>
<div class="top3" id="Layer4"><img src="images/Layer4.png"></div>
<div class="top3" id="DSC0416"><img src="images/DSC0416.png"></div>
<div class="top3" id="IMG0541"><img src="images/IMG0541.png"></div>
<div class="top3 top3" id="DSC0331"><img src="images/DSC03311.png"></div>
<div class="top1 top3" id="Food">Food</div>
<div class="top1 top3" id="portrait">Food</div>
<div class="top1 top3" id="LANSCAPES">Food</div>
<div class="top1 top3" id="kids">Food</div>
<div class="top1 top3" id="SPORTS">Food</div>

Answer 1

Use display on <a> and apply hover on <a>, like:
.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;
}
Have a look at the snippet below:
.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"><img src="images/DSC0123.png"></div>
<div class="top3" id="Layer4"><img src="images/Layer4.png"></div>
<div class="top3" id="DSC0416"><img src="images/DSC0416.png"></div>
<div class="top3" id="IMG0541"><img src="images/IMG0541.png"></div>
<div class="top3 top3" id="DSC0331"><img src="images/DSC03311.png"></div>
<div class="top1 top3" id="Food">Food</div>
<div class="top1 top3" id="portrait">Food</div>
<div class="top1 top3" id="LANSCAPES">Food</div>
<div class="top1 top3" id="kids">Food</div>
<div class="top1 top3" id="SPORTS">Food</div>
Hope this helps!

Answer 2

If I understand correctly, you want an image to scale up/down on hover, but not the text. You can do this without duplicating links and with fewer, more robust code. I've made an example to demonstrate, and added borders for ease. You can do whatever you like on hover, of course. I kept it simple.
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;
}
<img src="http://img05.deviantart.net/c135/i/2011/134/7/0/bridge_by_kzonedd-d3gcetc.jpg" alt="old wooden bridge" /><span>text</span>

Answer 3

The user wants BOTH to scale (the img and the text)
You should put the text div inside the image div, like this:
<div class="top3" id="DSC0123">
<img src="http://www.w3schools.com/css/trolltunga.jpg" />
<div class="top1 top3" id="Food">
Food
</div>
</div>
https://jsfiddle.net/933ex7pv/2/ (working fiddle)
Add transform-origin: 0 0; (or some other values that you like) to make it scale in the center.