アニメーション背景サイズ：背景サイズへの拡大：110％

Question

私は、CSSを探して、ホバー上のbackground-size: cover;からbackground-size: 120%までの背景をアニメーション化したいと考えています。別のデバイス/モニタで垂直方向に繰り返し始めるので、バックグラウンドを100％で開始することはできません。ただし、この場合、transition:.5s;はどのような種類のアニメーションも停止します。これを回避するには？あなたが他の値にcoverからアニメーション化することはできません実現してきたように

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 1

：

コードは次のようになります。

あなたはスケール擬似要素と偽の効果ができますおそらく、同様ホバー：

.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>