how to keep the hover background after the user moved the mouse until the transform finishes

user_19493043 0
Viewed 43

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 class="wrapper">
  <div class="container">
    <div class="child">
      <span>Text</span>
    </div>
  </div>
</div>

css-transforms hover background-image css html
1 Answers

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 {
  --bgImg: url('https://images.freeimages.com/images/large-previews/de7/energy-1-1176465.jpg');
  --colorDefault: darkgray;
  --colorHover: black;
  --columnWidth: 1;
  --transTime: 660ms;
  --transFunc: cubic-bezier(0.77, 0, 0.175, 1);
  --wrapperGap: 1rem;
}
@media (min-width: 768px) { :root { --wrapperGap: 1.5rem } }
@media (min-width: 1200px) { :root { --wrapperGap: 2rem } }

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrapperGap);
  justify-content: center;
  margin: auto;
  max-width: 1200px;
  padding: var(--wrapperGap);
  text-align: center;
}
.container {
  border: 3px solid #eee;
  cursor: pointer;
  flex: 0 0 auto;
  width: calc( ( var(--columnWidth) * 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 .txt {
  color: #ffffff;
  cursor: pointer;
  font-size: 35px;
  text-align: center;
  z-index: 1;
}
.child .img {
  aspect-ratio: var(--columnWidth)/1;
  background-image: var(--bgImg);
  background-size: cover;
  opacity: 0;
  width: 100%;
  
  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 class="wrapper">
  <div class="container">
    <div class="child">
      <div class="img"></div>
      <div class="txt">Original Image</div>
    </div>
  </div>
  <div class="container" style="--colorHover: green; --bgImg: url('https://picsum.photos/600?random=1');">
    <div class="child">
      <div class="img"></div>
      <div class="txt">Random One</div>
    </div>
  </div>
  <div class="container" style="--colorHover: blue; --bgImg: url('https://picsum.photos/600?random=2');">
    <div class="child">
      <div class="img"></div>
      <div class="txt">Random Two</div>
    </div>
  </div>
  <div class="container" style="--colorHover: red; --bgImg: url('https://picsum.photos/600?random=3');">
    <div class="child">
      <div class="img"></div>
      <div class="txt">Random Three</div>
    </div>
  </div>
  <div class="container" style="--columnWidth: 2; --colorHover: purple; --colorDefault: pink; --bgImg: url('https://picsum.photos/600?random=4');">
    <div class="child">
      <div class="img"></div>
      <div class="txt">Random Four (large)</div>
    </div>
  </div>
</div>

user_192137250
Related