css動畫中的中心圖像

Question

我有一個關於懸停動畫大小和位置的圖像。問題在於懸停後圖像不居中。我想要實現的動畫是將標誌製作成頂部中心和縮小的動畫。

.col-4 { 
 
    float: left; 
 
    width: 25%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.col-4 img.bg { 
 
    width: 100%; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
.col-4:hover img.bg { 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
} 
 

 
.col-4 .logo { 
 
    position: absolute; 
 
    width: 50%; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
    -webkit-transform-origin: 50% 50%; 
 
    -ms-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
} 
 

 
.col-4:hover .logo { 
 
    top: 10%; 
 
    -webkit-transform: scale(.5); 
 
    -ms-transform: scale(.5); 
 
    transform: scale(.5); 
 
} 
 

 
.col-4 .logo img { 
 
    width: 100%; 
 
} 
 

 
.overlay-bg { 
 
    background: rgba(0, 0, 0, 0.4); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transition: .5s; 
 
    transition: .5s; 
 
} 
 

 
.col-4:hover .overlay-bg { 
 
    background: rgba(0, 0, 0, 0); 
 
}

<div class="row"> 
 
    
 
     <div class="col-4"> 
 
      <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " /> 
 
      <div class="logo"> 
 
       <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " /> 
 
      </div> 
 
      <span class="overlay-bg"></span> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " /> 
 
      <div class="logo"> 
 
       <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " /> 
 
      </div> 
 
      <span class="overlay-bg"></span> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " /> 
 
      <div class="logo"> 
 
       <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " /> 
 
      </div> 
 
      <span class="overlay-bg"></span> 
 
     </div> 
 
     <div class="col-4"> 
 
      <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" alt=" " /> 
 
      <div class="logo"> 
 
       <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" " /> 
 
      </div> 
 
      <span class="overlay-bg"></span> 
 
     </div> 
 
     
 
    </div>

的jsfiddle鏈接：

http://jsfiddle.net/357bz53c

Answer 1

嘗試this：

.col-4 { 
 
    float: left; 
 
    width: 25%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
    .col-4 img.bg { 
 
     width: 100%; 
 
     -webkit-transition: 0.5s; 
 
     transition: 0.5s; 
 
    } 
 

 
     .col-4:hover img.bg { 
 
      -webkit-transform: scale(1.5); 
 
      -ms-transform: scale(1.5); 
 
      transform: scale(1.5); 
 
     } 
 

 
    .col-4 .logo { 
 
     position: absolute; 
 
     width: 50%; 
 
     top: 25%; 
 
     left: 25%; 
 
     -webkit-transition: 0.5s; 
 
     transition: 0.5s; 
 
    } 
 

 
     .col-4:hover .logo { 
 
      top: 0; 
 
      -webkit-transform: scale(0.5); 
 
      -ms-transform: scale(0.5); 
 
      transform: scale(0.5); 
 
     } 
 

 
     .col-4 .logo img { 
 
      width: 100%; 
 
     } 
 

 
.overlay-bg { 
 
    background: rgba(0, 0, 0, 0.4); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 

 
     .col-4:hover .overlay-bg { 
 
      background: rgba(0, 0, 0, 0); 
 
     }

<div class="row"> 
 
    <div class="col-4"> 
 
     <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" 
 
      alt=" "/> 
 
     <div class="logo"> 
 
      <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/> 
 
     </div> 
 
     <span class="overlay-bg"></span> 
 
    </div> 
 
    <div class="col-4"> 
 
     <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" 
 
      alt=" "/> 
 
     <div class="logo"> 
 
      <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/> 
 
     </div> 
 
     <span class="overlay-bg"></span> 
 
    </div> 
 
    <div class="col-4"> 
 
     <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" 
 
      alt=" "/> 
 
     <div class="logo"> 
 
      <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/> 
 
     </div> 
 
     <span class="overlay-bg"></span> 
 
    </div> 
 
    <div class="col-4"> 
 
     <img src="http://www.freebiesgallery.com/wp-content/uploads/2013/08/light-blue-background-3.jpg" class="bg" 
 
      alt=" "/> 
 
     <div class="logo"> 
 
      <img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png" alt=" "/> 
 
     </div> 
 
     <span class="overlay-bg"></span> 
 
    </div> 
 
</div>