悬停效果转换属性

我正在试图创建一个图库，链接从底部显示在悬停。当他们不在悬停时隐藏他们，我有困难。悬停效果转换属性

我想做一个画廊，链接显示从底部盘旋。当他们不在悬停时隐藏他们，我有困难。我想做一个画廊，链接从底部显示在盘旋。当他们不在悬停时隐藏他们，我有困难。我想做一个画廊，链接从底部显示在盘旋。当他们不在悬停时隐藏他们，我有困难。我想做一个画廊，链接从底部显示在盘旋。当他们不在悬停时隐藏他们，我有困难。

.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

为达到目的，我删除了我的评论...对不起，对名字不好。 :) –

悬停效果转换属性

回答

相关问题