悬停效果转换属性

时间：2016-12-25 07:00:32

标签： html css css3 hover transform

我正在尝试制作一个图库，链接从底部显示出来 徘徊。当他们没有悬停时，我无法隐藏它们。

我正在尝试制作一个图库，链接从底部显示出来 徘徊。当他们没有悬停时，我无法隐藏它们。 我正在尝试制作一个画廊，链接从底部显示出来 徘徊。当他们没有悬停时，我无法隐藏它们。 我正在尝试制作一个画廊，链接从底部显示出来 徘徊。当他们没有悬停时，我无法隐藏它们。 我正在尝试制作一个画廊，链接从底部显示出来 徘徊。当他们没有悬停时，我无法隐藏它们。

＆＃13;
＆＃13; 
.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;
    }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

将此行transform: translateX(0) translateY(100px) translateZ(0);更改为transform: translateX(0) translateY(115px) translateZ(0); ：

将overflow:hidden添加到.imageWrapper以删除图片下方的空间

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题