CSS缩放效果背景悬停

Question

我想要在div中放大我的背景。我不希望div更大，但我希望图像放大悬停，而不增加div。我已经尝试了一切，但我似乎无法让它工作。

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"><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> 

是否有任何人谁可以帮我？我认为我必须做一个盒式视觉：盘旋，但这也没有做任何事。 :-(

Answer 1

更改悬停到.box-link应使其工作。例如：

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

见Updated Fiddle

Answer 2

如果你不想越过div的边界形象，div CSS属性设置为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>