响应式图像库与moseover效果

我试图在图像库中的图像与鼠标悬停效果之间添加空间但是当添加填充或CSS代码中的边距mouseover效果摧毁时，我该如何做到这一点？响应式图像库与moseover效果

我的HTML代码：

@foreach($array as $img) 
     <section class="portfolio-container"> 
      <ul class="portfolio-list"> 
      <li> 
       <a href="#"> 
        <img src="{{$img['image']}}"> 
       </a> 
      </li> 
     </ul> 

    </section>

和CSS代码：

.portfolio-container, 
.portfolio-list { 
margin:0 auto; 
    list-style: none; 

} 
.portfolio-container{padding-bottom:200px;} 


.portfolio-list li { 
    float: left; 
    opacity: 1; 
    filter: alpha(opacity=100); 
    position: relative; 
    display: block; 
    margin:0; 
    } 
.portfolio-list li img { 
    vertical-align: middle; 
    display: block; 
    width: 100%; 
    margin:0; 
    height: 100%; 
    } 
.portfolio-list a:after { 
    color:#ffff; 
    content: '\f067'; 
    font-family: FontAwesome; 
    max-width:100%; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    display:flex; 
    background: rgba(0, 0, 0, 0.6) center center no-repeat; 
    opacity: 0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    text-align:center; 
    align-items: center; 
    justify-content: center; 
    font-size:45px; 
    } 

.portfolio-list a:hover:after { 
    opacity: 1; 
    } 
@media (min-width: 768px) and (max-width: 979px) { 
    .portfolio-list li { 
    width: 33.3333%; 
    height:280px; 
} 
    .portfolio-list { 
    width: 70%;} 
} 

    @media (max-width: 767px) { 
    .portfolio-list li { 
    width: 33.3333%; 
    height:100px; 
    } 
    .portfolio-list { 
    width: 100%;} 
    }

图片我的相册

来源

2017-07-21 Honey

请现场演示。 – Oen44

@ Oen44你的意思是？ – Honey

我的意思是，如果你附上我们可以研究的现场演示，它将帮助我们确定解决方案。 – Oen44

尝试添加两行的.portfolio-的底部列表李如果你只是寻找照片之间的差距，不明白，如果你正在寻找与鼠标悬停的差距，但你可以扔寿如果真是这样的话，那就放在悬停上吧。

.portfolio-list li { 
    position: relative; 
    display: block; 
    float: left; 
    width: 20%; 
    border: 10px solid white; 
    margin: -10px; 
}

来源

2017-07-21 21:06:13

响应式图像库与moseover效果

回答

相关问题