懸停效果轉換屬性

我正在試圖創建一個圖庫，鏈接從底部顯示在懸停。當他們不在懸停時隱藏他們，我有困難。懸停效果轉換屬性

我想做一個畫廊，鏈接顯示從底部盤旋。當他們不在懸停時隱藏他們，我有困難。我想做一個畫廊，鏈接從底部顯示在盤旋。當他們不在懸停時隱藏他們，我有困難。我想做一個畫廊，鏈接從底部顯示在盤旋。當他們不在懸停時隱藏他們，我有困難。我想做一個畫廊，鏈接從底部顯示在盤旋。當他們不在懸停時隱藏他們，我有困難。

.imageWrapper { 
 
     position: relative; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: inline-block; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper img { 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper .cornerLink { 
 
     height:100px; 
 
     width:200px; 
 
     opacity: 0.7; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     margin: 0; 
 
     padding: 0; 
 
     color: #ffffff; 
 
     background-color: cadetblue; 
 
     text-decoration: none; 
 
     text-align: center; 
 
     transform: translateX(0) translateY(100px) translateZ(0); 
 
     transition-duration:0.3s; 
 
     transition-property: transform; 
 
     
 
    } 
 
    .imageWrapper:hover .cornerLink { 
 
     transform: translateX(0) translateY(0) translateZ(0); 
 
    } 
 
    a{ 
 
     color: #ffffff; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    }

<body> 
 
     <main> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
      
 
      
 
     </main> 
 
    </body>

來源

2016-12-25 user2777173

可以添加代碼 – ab29007

你的意思是，當你將鼠標懸停在圖像 – ab29007

將overflow:hidden;加到您的.imageWrapper班。這裏的工作代碼：

.imageWrapper { 
 
     position: relative; 
 
     width: 200px; 
 
     height: 200px; 
 
     display: inline-block; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     overflow:hidden; 
 
    } 
 
    .imageWrapper img { 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     padding: 0px; 
 
     margin: 0px; 
 
    } 
 
    .imageWrapper .cornerLink { 
 
     height:100px; 
 
     width:200px; 
 
     opacity: 0.7; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     margin: 0; 
 
     padding: 0; 
 
     color: #ffffff; 
 
     background-color: cadetblue; 
 
     text-decoration: none; 
 
     text-align: center; 
 
     transform: translateX(0) translateY(100px) translateZ(0); 
 
     transition-duration:0.3s; 
 
     transition-property: transform; 
 
     
 
    } 
 
    .imageWrapper:hover .cornerLink { 
 
     transform: translateX(0) translateY(0) translateZ(0); 
 
    } 
 
    a{ 
 
     color: #ffffff; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    }

<body> 
 
     <main> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
     <div class="imageWrapper"> 
 
      <img src="http://placehold.it/200x200" alt="" /> 
 
      <div class="cornerLink"> 
 
      <a href="http://google.com">Link</a> 
 
      </div> 
 

 
     </div> 
 
      
 
      
 
     </main> 
 
    </body>

來源

2016-12-25 07:30:08 ab29007

Thnx很多... !!! – user2777173

那你能接受我的答案嗎？你知道點擊我答案左邊的複選標記 – ab29007

~~改變這一行 transform: translateX(0) translateY(100px) translateZ(0);到 transform: translateX(0) translateY(115px) translateZ(0);~~ ：

添加overflow:hidden到.imageWrapper下的圖像刪除空間

.imageWrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; /* Hides links when off image */ 
 
} 
 
.imageWrapper img { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.imageWrapper .cornerLink { 
 
    height: 100px; 
 
    width: 200px; 
 
    opacity: 0.7; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #ffffff; 
 
    background-color: cadetblue; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    transform: translateX(0) translateY(100px) translateZ(0); 
 
    transition-duration: 0.3s; 
 
    transition-property: transform; 
 
} 
 
.imageWrapper:hover .cornerLink { 
 
    transform: translateX(0) translateY(0) translateZ(0); 
 
} 
 
a { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<body> 
 
    <main> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 
    <div class="imageWrapper"> 
 
     <img src="http://placehold.it/200x200" alt="" /> 
 
     <div class="cornerLink"> 
 
     <a href="http://google.com">Link</a> 
 
     </div> 
 

 
    </div> 
 

 

 
    </main> 
 
</body>

來源

2016-12-25 07:28:05

日Thnx了很多...！ – user2777173

謝謝你的克里斯，它*她* :) – ab29007

爲達到目的，我刪除了我的評論...對不起，對名字不好。 :) –

懸停效果轉換屬性

回答

相關問題