響應式圖像庫與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效果

回答

相關問題