Question

我试图在用户将鼠标悬停在图片上时显示此叠加层但是它没有显示在我想要的位置。现在，当用户滚动行中的第二个图像时，我会显示叠加层，但叠加层占用的高度远远超过它应该的高度。

对此有任何帮助表示赞赏。我已经坚持了一段时间。

我正在使用www.responsivegridsystem.com中的grid.css文件，这就是为什么我在div中有col和span类，所以代码片段可能无法运行，就像我拥有它一样。

快速分解我有一个带有类port-links的div，我在img源代码里面有一个锚标签。在css我有用户滚动端口链接的地方，应该出现内容叠加。

这是代码。

＆＃13;

/*--#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%;
}

＆＃13;

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

＆＃13;

Answer 1

您需要将position:relative分配给每个部分.port-links和position:absolute中的顶部元素，并将其分配到您要位于其上的覆盖元素（.content-overlay）

更新代码：

＆＃13;

/*--#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;
    position:relative;
}

.port-links img{

    width: 100%;
    height: 100%;
    
}


.content-overlay{
  background: rgba(0,0,0,0.9);
  position: absolute;
  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%;
}

＆＃13;

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

＆＃13;

如何使图像内容叠加显示在图像上？

1 个答案: