使链接成为块的完整大小

Question

我正在改编James在此发布的投资组合代码： 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>