Question

我正在调整詹姆斯在http://codepen.io/SeamlessThemes/pen/LiBdo

发布的投资组合代码

我已经设法改变了我需要的大部分东西，但我不能为我的生活获得href来覆盖响应块。目前只有“查看”链接和填充处于活动状态。

我会在这里重现代码，这样如果你不愿意，你就不需要访问codepen

* {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

.view {
    width: 32.33%;
    height: auto;
    margin-right: 0px;
    float: left;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #079;
}
.view:last-child {
    margin-right: 0px; 
}
.view .mask, .view .content {
    width: 32.33%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: #222;
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}



.view-portfolio img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-portfolio .mask {
   background-color: #222;
   -webkit-transform: translateX(-300px);
   -moz-transform: translateX(-300px);
   -o-transform: translateX(-300px);
   -ms-transform: translateX(-300px);
   transform: translateX(-300px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-portfolio h2 {
   background: #222;
   color: #FFF;
}
.view-portfolio p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   color: #FFF;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-portfolio:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-portfolio:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}
.view-portfolio:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

<div class="view view-portfolio">
                    <img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
                    <div class="mask">
                        <h2>Portfolio Item 1</h2>
                        <p>This is an example portfolio item exceprt.</p>
                        <a href="#" class="info">View</a>
                    </div>
</div>
<div class="view view-portfolio">
                    <img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
                    <div class="mask">
                        <h2>Portfolio Item 2</h2>
                        <p>This is another example portfolio item exceprt.</p>
                        <a href="#" class="info">View</a>
                    </div>
</div>
<div class="view view-portfolio">
                    <img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
                    <div class="mask">
                        <h2>Portfolio Item 3</h2>
                        <p>This is yet another example portfolio item exceprt.</p>
                        <a href="#" class="info">View</>
                    </div>
</div>

Answer 1

.view a.info {
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;

}

您可以相应地进行调整。

Answer 2

我真的不明白这个问题，但如果你想在图片上找到一个链接......

<div class="view view-portfolio">
      <a href="http://www.w3schools.com/html/">
           <img src="http://locallylost.com/chun/files/2013/01/manhattansummer.jpg">
      </a>
      <div class="mask">
           <h2>Portfolio Item 1</h2>
           <p>This is an example portfolio item exceprt.</p>
           <a href="#" class="info">View</a>
      </div>
</div>

使链接成为块的完整大小

2 个答案: