title: CSS zoom effect background hover
body: <p>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. </p>
  
  <p>CSS:</p>
  
  <pre><code>/* 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%;
  }
  
  
  
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/9b7fvfk6/" rel="nofollow">https://jsfiddle.net/9b7fvfk6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width" /&gt; 
  
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;&lt;a href="" title="FavoriteFM" class="top-logo-container"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id="main"&gt;
  &lt;div id="presenter"&gt;
  &lt;div class="presenter-one"&gt;&lt;a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon"&gt;Testcategorie&lt;/a&gt;&lt;a class="box-link" href="/airfield"&gt;&lt;h4 class="ng-binding"&gt;Dit is een testregel!&lt;/h4&gt;&lt;span class="box-overlay"&gt;&lt;/span&gt; &lt;span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="presenter-two"&gt;&lt;a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon"&gt;Testcategorie&lt;/a&gt;&lt;a class="box-link" href="/airfield"&gt;&lt;h4 class="ng-binding"&gt;Dit is een testregel!&lt;/h4&gt;&lt;span class="box-overlay"&gt;&lt;/span&gt; &lt;span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="presenter-three"&gt;&lt;a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon"&gt;Testcategorie&lt;/a&gt;&lt;a class="box-link" href="/airfield"&gt;&lt;h4 class="ng-binding"&gt;Dit is een testregel!&lt;/h4&gt;&lt;span class="box-overlay"&gt;&lt;/span&gt; &lt;span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="presenter-four"&gt;&lt;a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon"&gt;Testcategorie&lt;/a&gt;&lt;a class="box-link" href="/airfield"&gt;&lt;h4 class="ng-binding"&gt;Dit is een testregel!&lt;/h4&gt;&lt;span class="box-overlay"&gt;&lt;/span&gt; &lt;span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="presenter-five"&gt;&lt;a class="presenter-ribbon" href="/Testcategorie" ng-if="element.ribon"&gt;Testcategorie&lt;/a&gt;&lt;a class="box-link" href="/airfield"&gt;&lt;h4 class="ng-binding"&gt;Dit is een testregel!&lt;/h4&gt;&lt;span class="box-overlay"&gt;&lt;/span&gt; &lt;span class="box-visual" style="background-image: url('http://eastsbeach.com.au/assets/Uploads/_resampled/SetWidth2000-Kiama-Events-Easts-Beach-PB.jpg')"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. :-(</p>