我得到了一个div，当用户悬停在它上面时，它会将背景更改为图像.当用户将鼠标悬停在背景上时，背景效果很好，变换效果得到平滑应用，但当用户移除鼠标时，图像会突然消失.
我不希望发生这种情况，我希望图像具有缩小效果，就像div中的文本一样，一旦效果完成，背景将更改为默认背景，并且不会在没有任何效果的情况下突然消失.
我怎样才能做到？
这是我的部门:
html,
body {
margin: 0px;
padding: 0px;
}
.wrapper {
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.container {
width: 45%;
margin: 20px;
height: 300px;
border: 3px solid #eee;
overflow: hidden;
position: relative;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background-color: darkgray;
}
span {
display: block;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
text-decoration: none;
}
.container:hover .child,
.container:focus .child {
background-image: url(https://images.freeimages.com/images/large-previews/de7/energy-1-1176465.jpg);
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.container:hover .child:before,
.container:focus .child:before {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52, 73, 94, 0.75);
}<div class="wrapper">
<div class="container">
<div class="child">
<span>Text</span>
</div>
</div>
</div>