CSS缩放效果背景悬停

我正试图在我的背景中以div放大。我不希望div变大，但我希望图像在悬停状态下放大，而不增加div。我已经尝试了所有方法，但似乎无法让它工作

CSS:

HTML:

---

有人能帮我吗？我想我必须制作一个可视的框：悬停，但那也没用-（

如果不希望图像跨越

div

的边界，请将

div

CSS属性设置为

overflow:hidden；

.container{
边框：2件纯黑；
高度：300px；
宽度：300px；
溢出：隐藏；
}
img：悬停{
转换：比例（1.5）；
}

---

将鼠标悬停更改为

.box链接应能使其工作。例如：

.box-link:hover .box-visual {
  transform: scale(1.1);
}

请参见
不客气：）请将答案标记为正确，否则将不胜感激：D
<meta name="viewport" content="width=device-width" /> 

<div id="wrapper">
<div id="header"><a href="" title="FavoriteFM" class="top-logo-container"></a></div>
<div id="main">
<div id="presenter">
<div class="presenter-one"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-two"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-three"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-four"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>
<div class="presenter-five"><a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon">Testcategorie</a><a class="box-link" href="/airfield"><h4 class="ng-binding">Dit is een testregel!</h4><span class="box-overlay"></span> <span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"></span></a></div>



</div>
</div>

.box-link:hover .box-visual {
  transform: scale(1.1);
}