0
我想让这个覆盖图在用户悬停在图像上时显示，但它没有显示出我想要的位置。现在，当用户滚动显示行中的第二张图片时，叠加层会出现，但叠加层的高度比应该高出许多。如何使图像内容覆盖图显示在图像上？
任何与此有关的帮助表示赞赏。我一直坚持这一点。
我使用的是www.responsivegridsystem.com的grid.css文件，这就是为什么我在div中有col和span类，所以代码片段可能不会运行，就像我拥有它的方式一样。
快速分解我有一个类与端口链接的div和我有一个锚点标签里面的IMG源。在CSS中，我有用户滚动内容叠加层应该出现的端口链接的位置。
这是代码。
/*--#00b300*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
background-color: #fff;
color:#333333;
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.clearfix{zoom: 1}
.clearfix:after{
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.row{
max-width: 1240px;
margin: 0 auto;
}
.row-small{
max-width: 100%;
margin: 0 auto;
}
section{
padding: 80px 0;
}
h1,
h2{
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
h2{
font-size: 250%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
}
h2:after{
display: block;
height: 2px;
background-color: #00919b;
content: " ";
width: 180px;
margin: 0 auto;
margin-top: 20px;
}
/*-------------------PORTFOLIO----------------------*/
.section-portflio{
color: #fff;
}
.port-links{
height:300px;
}
.port-links img{
width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: relative;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port-links:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port-links:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}<html lang = "en-us">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="grid.css">
<link rel="stylesheet" type = "text/css" href="css/animate.css">
<link rel="stylesheet" type = "text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type = "text/css" href="main.css">
<link rel="stylesheet" type = "text/css" href="css/responsive.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,300i,400" rel="stylesheet">
<title>Carlos Elizondo</title>
</head>
<body>
<section class="scetion-portfolio">
<div class="row">
<h2>Portfolio</h2>
</div>
<div class="row">
<a href="" >
<div class="col span-1-of-3 port-links">
<img src="images/omnifood-bg.PNG" alt="">
</div>
</a>
<div class="col span-1-of-3 port-links">
<a href="" >
<img src="images/atlas.PNG" alt="">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</a>
</div>
<div class="col span-1-of-3 port-links">
<a href="">
<img src="images/bg2.PNG" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col span-1-of-3 port-links">
<a href="" >
<img src="images/vizion.PNG" alt="">
</a>
</div>
<div class="col span-1-of-3 port-links">
<a href="" >
<img src="images/elizondo.PNG" alt="">
</a>
</div>
<div class="col span-1-of-3 port-links">
<a href="">
<img src="images/mav-background.PNG" alt="">
</a>
</div>
</div>
</section>
</body>
</html>
图像被打破 - 我现在看到的覆盖，但现在还不清楚 - 一个人去到全屏看grid.css是什么使得图像出现在一排的效果 – mplungjan
而不是像你在代码片段中看到的那样垂直对不起，我会尝试上传一张图片 –