ズーム効果CSS3私はこの効果を作成したい私のイメージ

Question

を伸ばします。私は効果があるが、私の初期のイメージは伸びている。私は背景画像のサイズがわからない、ユーザーがホバリングしているときに画像が少しズームしたいだけです。

.highlight{ 
    background-size: 100% 100%; 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

.highlight:hover{ 
    background-size: 120% 120%; 
    background-color:rgba(0,0,0,0); 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

.highlight:hover:before{ 
    content: ""; 
    display: inline; 
    width: 100%; 
    height: 100%; 
    background-color:rgba(0,0,0,0.7); 
    -moz-transition: background-size 3s ease, background-color 3s ease; 
    -webkit-transition: background-size 3s ease, background-color 3s ease; 
    transition: background-size 3s ease, background-color 3s ease; 
} 

<div class="col-xs-12 col-sm-12 col-md-6"> 
<div class="highlight" style="background-image:url(image-url)"> 
    <div class="content"> 
     <h3>Text</h3> 
     <p class="large">More text text text</a> 
    </div> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-6"> 
<div class="highlight" style="background-image:url(image-url2)"> 
    <div class="content"> 
     <h3>Text2</h3> 
     <p class="large">More text text text2</a> 
    </div> 
</div> 
</div> 

Answer 1

これはあなたが探して何ですか？

.highlight{ 
 
    position: relative; 
 
    height: 300px; 
 
    background-size: 100%; 
 
    background-position: center top; 
 
    -moz-transition: background-size 3s ease; 
 
    -webkit-transition: background-size 3s ease; 
 
    transition: background-size 3s ease; 
 
} 
 
.highlight:hover{ 
 
    background-size: 120%; 
 
    background-color:rgba(0,0,0,0); 
 
    -moz-transition: background-size 3s ease; 
 
    -webkit-transition: background-size 3s ease; 
 
    transition: background-size 3s ease; 
 
} 
 

 
.highlight:before{ 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    right: 0; bottom: 0; 
 
    background-color:rgba(0,0,0,0); 
 
    -moz-transition: background-color 3s ease; 
 
    -webkit-transition: background-color 3s ease; 
 
    transition: background-color 3s ease; 
 
} 
 
.highlight:hover:before{ 
 
    background-color:rgba(0,0,0,0.7); 
 
    -moz-transition: background-color 3s ease; 
 
    -webkit-transition: background-color 3s ease; 
 
    transition: background-color 3s ease; 
 
}

<div class="highlight" style="background-image:url(http://lorempixel.com/1100/700/nature/2/)"> 
 
    <div class="content"> 
 
     <h3>Text</h3> 
 
     <p class="large">More text text text</p> 
 
    </div> 
 
</div>