CSS zoom effect background hover - css

Question

I am trying to archieve a zoom in my background's in divs. I don't want the div to be bigger, but I want the image to zoom on hover, without growing the div. I have tried everything, but I can't seem to get it to work.
CSS:
/* Theme */
html {
margin-top: 0px !important;
}
/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}
.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}
body {
background-color: #f0ede9;
margin-top: 0px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.clearfix {
clear: both;
}
p {
font-family: Roboto;
padding: 1px;
}
#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}
.top-logo-container {
display: block;
height: 100px;
width: 100px;
text-indent: -9999px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100px;
}
#main {
margin-left: 2px;
}
.presenter-ribbon {
display: block;
position: absolute;
left: -5px;
top: 20px;
color: #fff;
background-color: #de1f26;
font-size: 12px;
line-height: 30px;
padding: 0 20px 0 30px;
font-family: 'Roboto Condensed',sans-serif;
font-weight: 700;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
text-transform: uppercase;
z-index: 20;
text-decoration: none;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.25);
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.box-link {
display: block;
position: absolute;
overflow: hidden;
box-sizing: border-box;
padding: 60px 20px 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
background-position: center center;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-ms-transition: all .1s linear;
-o-transition: all .1s linear;
}
.box-link .box-overlay {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.15);
z-index: 10;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.box-link .box-overlay:hover {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.15);
z-index: 10;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.box-link .box-visual {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
z-index: 5;
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.box-link .box-visual:hover {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
z-index: 5;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 0.7;
}
.box-link h4 {
display: block;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,.8);
z-index: 20;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
margin-bottom: 0;
}
.box-link h4 {
font-size: 22px;
line-height: 34px;
}
.presenter-one {
display: block;
height: 49.65%;
width: 50%;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
}
.presenter-two {
float: left;
position: relative;
display: block;
height: 25%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
position: relative;
display: block;
height: 25%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
position: relative;
display: block;
height: 25.4%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
position: relative;
display: block;
height: 25.4%;
width: 25%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
#media screen and (min-width: 737px) and (max-width: 1200px) {
#wrapper {
width: 100%
}
}
#media screen and (min-width: 737px) and (max-width: 1200px) {
#wrapper {
width: 100%
}
}
#media screen and (max-width: 736px) and (min-width: 415px) {
#wrapper {
width: 100%
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 50%;
width: 100%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
#media screen and (max-width: 414px) and (min-width: 1px) {
#wrapper {
width: 100%
}
#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}
.top-logo-container {
display: block;
height: 120px;
width: 120px;
background: url(http://favoritefm.com/wp-content/themes/FavClear/img/logo.png) 5% 50% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 120px;
}
#main {
margin-left: 2px;
}
#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}
.presenter-one {
display: block;
height: 50%;
width: 100%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-two {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-three {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-four {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
.presenter-five {
display: block;
height: 50%;
width: 50%;
background: url(http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg) 0% 0% no-repeat scroll;
margin: 0 auto;
position: relative;
float: left;
background-color: #000;
margin-top: -10px;
background-size: 100% 100%;
}
}
https://jsfiddle.net/9b7fvfk6/
HTML:
<meta name="viewport" content="width=device-width" />
<div id="wrapper">
<div id="header"></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>
Is there anyone who can help me? I thought I would have to make a box-visual:hover, but that's not doing anything either. :-(

Answer 1

Change the hover to the .box-link should makes it working. Example:
.box-link:hover .box-visual {
transform: scale(1.1);
}
See Updated Fiddle

Answer 2

If you don't want the image to cross the borders of the div, set the div CSS property to overflow: hidden;
.container {
border: 2px solid black;
height: 300px;
width: 300px;
overflow: hidden;
}
img:hover {
transform: scale(1.5);
}
<div class="container">
<img src="http://goo.gl/1ex50e"/>
</div>