为什么我的悬停效果重叠

时间：2018-06-16 14:44:03

标签： html css

我有一个带有悬停效果的图片库但是当鼠标悬停在图片底部时会选择下面的图片。我不知道我需要改变什么来阻止这种情况发生所有图像似乎都这样做，我使用了我在互联网上找到的悬停效果。

无论如何它可以改变，我已经尝试了很长时间才能使它工作，我使用Bootstrap来帮助构建网站。

＆＃13;
＆＃13; 
*{
  font-family: Playfair display;
}


#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #1B222D;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 60px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #F2C8C3;
  display: block;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #F2C8C3;
  font-size: 25px;

}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

#menu-toggle {
  display: none;
}

.inset {
  padding: 20px;
}

@media (max-width:767px) {

#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0;
}

#wrapper.active {
  position: relative;
  left: 250px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 250px;
  transition: all 0.4s ease 0s;
}

#menu-toggle {
  display: inline-block;
}

.inset {
  padding: 15px;
}

}







.gal {
  
  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    
  
  } 
  .gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
    
    .gal {
  
  
  -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    
  
  }
    
  }




















.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <link href="css/simple-sidebar.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">


<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>


</head>

<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="#">S.C Designs</a>
                </li>
                <li><a href="#">Dashboard</a>
                </li>
                <li><a href="#">Instagram</a>
                </li>
                <li><a href="#">Overview</a>
                </li>
                <li><a href="#">Events</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Services</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>

        <!-- Page content -->
        <div id="page-content-wrapper">
            <div class="content-header">
                <h1>
                    <a id="menu-toggle" href="#" class="btn btn-default"><i class="icon-reorder"></i></a>
                    Simple Sidebar
                </h1>
            </div>
            <!-- Keep all page content within the page-content inset div! -->
            <div class="page-content inset">
                <div class="row">



<div class="container">



<div class="col-md-12">
<div class="row">
<hr>

    <div class="gal">







  <div class="col-md-13">
    <div class="hovereffect">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" class="img-fluid " alt="">
        <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>


<div class="col-md-13">
    <div class="hovereffect">
        <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
           <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>





<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>







            
            <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
            
            


        
<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>




                <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
            





<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>





<div class="col-md-13 ">
    <div class="hovereffect">
                            <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">

                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>
            








            
<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>




<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>






<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>







<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>




                
<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>




                
<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>                







<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>                





                    <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
            
                







                        <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
            



            


<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>            







<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>            







<div class="col-md-13">
    <div class="hovereffect">
            <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                <div class="overlay">
           <h2>Hover effect 1</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>
</div>            






                <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
                
    </div>
    
</div>
</div>
</div>













  <div class="footer-push"></div>
</section>
                    <div class="col-md-12">
                        <p class="lead">This simple sidebar template has a hint of JavaScript to make the template responsive. It also includes Font Awesome icon fonts.</p>
                    </div>
                    <div class="col-md-6">
                        <p class="well">The template still uses the default Bootstrap rows and columns.</p>
                    </div>
                    <div class="col-md-6">
                        <p class="well">But the full-width layout means that you wont be using containers.</p>
                    </div>
                    <div class="col-md-4">
                        <p class="well">Three Column Example</p>
                    </div>
                    <div class="col-md-4">
                        <p class="well">Three Column Example</p>
                    </div>
                    <div class="col-md-4">
                        <p class="well">You get the idea! Do whatever you want in the page content area!</p>
                    </div>
                </div>
            </div>
        </div>

    </div>



    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>

    <!-- Custom JavaScript for the Menu Toggle -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
    });
    </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

更改叠加层上的边距：

  margin: 10px 0 0;

Demo

相关问题
最新问题