Charlie McShane Charlie McShane - 12 days ago 6
CSS Question

Animate background-size: zoom to background-size: 110%

Looking to CSS animate a background from the size

background-size: cover;
to
background-size: 120%
on hover. I cannot have the background start at 100% as it begins to repeat itself vertically on different devices/monitors. However, the
transition:.5s;
stops any type of animation when this is the case. Any work around for this?

Code looks like this:

HTML

<div class="desktop-signs">
<div class="image-box">
<div class="col-md-4 block-service" id="block-illustration">
<h2>ILLUSTRATION &amp; ANIMATION</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-website">
<h2>WEBSITE DEVELOPMENT</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-game">
<h2>GAME &amp; APP DEVELOPMENT</h2>
</div>
</div>
</div>


CSS

.__hero-container #services .block-service {
height: 800px;
background-image: url('../images/blockillustration.jpg');
background-size: cover;
text-align: center;
color: #fff;
background-position: center;
opacity: 1;

-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}

.__hero-container #services .block-service:hover {
background-size: 110%;
opacity: 0.8;
cursor: pointer;
}

Answer

As you have realised you can not animate from cover to any other value.

You could fake the effect with a scaled pseudo element:

.block-service {
  height: 800px;
  color: #fff;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.block-service:before {
  content: "";
  background-image: url('http://placehold.it/400x400');
  background-size: cover;
  background-position: center;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: all .5s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.block-service:hover:before {
  transform: scale(1.2);
  opacity: 0.8;
  cursor: pointer;
}
<div class="desktop-signs">
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-illustration">
      <h2>ILLUSTRATION &amp; ANIMATION</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-website">
      <h2>WEBSITE DEVELOPMENT</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-game">
      <h2>GAME &amp; APP DEVELOPMENT</h2>
    </div>
  </div>
</div>

Comments