I got a div that changes its background to an image when a user hovers over it. The background is doing fine when the user hovers over it and the transform effect is applied smoothly, but when the user removes the mouse the image disappears suddenly.

I don't want it to happen and want the image to have a zoom out effect just like the Text inside the div and once the effect is finished the background changes to the default one and do not disappear suddenly without any effects.

How can I make it possible?

Here's my 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 >
  <div >
    <div >
      <span>Text</span>
    </div>
  </div>
</div>

CodePudding user response：

Here's some simplified CSS using display: grid and putting the images in the HTML

• The image has opacity: 0 to begin with, once hovered it goes to opacity: 0.75
• The image is the item that increases size on hover, this is so the text doesn't clip
• Change the hover accent by adding style="--colorHover: red" to any .container
• The gap between items is larger on bigger screens

Plus your browser will love you because the properties that change on hover won't trigger layout, and other than background-color it won't trigger paint! See here for more details https://csstriggers.com

* { box-sizing: border-box } body { font: 16px sans-serif; margin: 0 }


:root {
  --wrapperGap: 1rem;
  --colorDefault: darkgray;
  --colorHover: black;
  --transTime: 660ms;
  --transFunc: cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) { :root { --wrapperGap: 1.5rem } }
@media (min-width: 1200px) { :root { --wrapperGap: 2rem } }

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrapperGap);
  margin: auto;
  max-width: 1200px;
  padding: var(--wrapperGap);
  text-align: center;
}
.container {
  border: 3px solid #eee;
  cursor: pointer;
  flex: 0 0 auto;
  height: 300px; width: calc( 50% - ( var(--wrapperGap) / 2 ) ) ;
  overflow: hidden;
}
.child {
  background-color: var(--colorDefault);
  display: grid;
  height: 100%; width: 100%;
  place-items: center;

  transition: background-color var(--transTime) var(--transFunc);
}
.child > * { grid-area: 1/1/-1/-1 }
.child span {
  color: #ffffff;
  cursor: pointer;
  font-size: 35px;
  text-align: center;
  z-index: 1;
}
.child img {
  height: 100%; width: 100%;
  min-height: 0;
  object-fit: cover;
  opacity: 0;
  
  transition: opacity calc(var(--transTime) * 2) var(--transFunc), transform var(--transTime) var(--transFunc);
}

.container:hover .child {
  background-color: var(--colorHover);
  transition: background-color var(--transTime) calc(var(--transTime) / 2) var(--transFunc);
}

.container:hover .child img {
  opacity: 0.75;
  transform: scale(1.2);
  transition: opacity var(--transTime) var(--transFunc), transform calc(var(--transTime) * 2) var(--transFunc);
}

<div >
  <div >
    <div >
      <img src="https://picsum.photos/600?random=1">
      <span>Random One</span>
    </div>
  </div>
  <div  style="--colorHover: green">
    <div >
      <img src="https://picsum.photos/600?random=2">
      <span>Random Two</span>
    </div>
  </div>
  <div  style="--colorHover: blue">
    <div >
      <img src="https://picsum.photos/600?random=3">
      <span>Random Three</span>
    </div>
  </div>
  <div  style="--colorHover: red">
    <div >
      <img src="https://picsum.photos/600?random=4">
      <span>Random Four</span>
    </div>
  </div>
</div>