鼠标悬停时如何居中放大背景图像

Question

**HTML**
<div class="bimage">
    <img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
**CSS**
.bimage {
    display: flex;
    border:2px solid red;
    width:100%;
    height:300px;
    background:url('http://tinyurl.com/orwbgck');
    background-size:100%;
}
.bimage:hover{
        background-size:120%;
}
.fimage {
    width: 200px; 
    margin: auto;  
}

在这里，当鼠标悬停在该图像上时，我可以放大图像。但是我需要居中放大图像和动画效果，而不会增加div宽度和高度。吉斯菲德尔

Answer 1

您可以添加background-position:center以及background-size

.bimage {
    display: flex;
    border:2px solid red;
    width:100%;
	height:300px;
	background:url('http://tinyurl.com/orwbgck');
    background-size:100%;
    transition:1s all;
  background-position:center;
}
.bimage:hover{
		background-size:200%;
    
}
.fimage {
    width: 200px; 
    margin: auto;  
}

<div class="bimage">
    <img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>