HTML，CSS似乎無法得到它的工作

Question

我一直工作在固定的高度全寬（懸停圖像展開「溢出隱藏」）

不知道我做錯了，我似乎無法連接@media，而我在加載錯誤方向的第6張圖片時遇到了問題。

希望有人能指出我正確的方向。

#items { 
 
    width:300px; 
 
    display: inline; 
 
} 
 

 
.itemHolder { 
 
    float:left; 
 
    width:16.6%; 
 
    height:600px; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 

 
.item { 
 
    position:center; 
 
    top:0; 
 
    left:0; 
 
    z-index:1; 
 
    width:100%; 
 
    background:#FFF; 
 
    position: relative; 
 
} 
 
.itemHolder:hover { 
 
    overflow:visible; 
 
    position:center; 
 
} 
 
.itemHolder:hover .item { 
 
    z-index:2; 
 
} 
 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 {width: 8.33%;} 
 
    .col-m-2 {width: 16.66%;} 
 
    .col-m-3 {width: 25%;} 
 
    .col-m-4 {width: 33.33%;} 
 
    .col-m-5 {width: 41.66%;} 
 
    .col-m-6 {width: 50%;} 
 
    .col-m-7 {width: 58.33%;} 
 
    .col-m-8 {width: 66.66%;} 
 
    .col-m-9 {width: 75%;} 
 
    .col-m-10 {width: 83.33%;} 
 
    .col-m-11 {width: 91.66%;} 
 
    .col-m-12 {width: 100%;} 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 {width: 8.33%;} 
 
    .col-2 {width: 16.66%;} 
 
    .col-3 {width: 25%;} 
 
    .col-4 {width: 33.33%;} 
 
    .col-5 {width: 41.66%;} 
 
    .col-6 {width: 50%;} 
 
    .col-7 {width: 58.33%;} 
 
    .col-8 {width: 66.66%;} 
 
    .col-9 {width: 75%;} 
 
    .col-10 {width: 83.33%;} 
 
    .col-11 {width: 91.66%;} 
 
    .col-12 {width: 100%;} 
 
}

<div class="col- col-12"> 
 
<div id="items"> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="itemHolder"> 
 
    <div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029084/image5.jpg?1489029084" alt=""> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

這應該解決的問題，並在所有瀏覽器更好的工作。

.items { 
 
    min-height: 600px; 
 
    overflow: hidden; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); 
 
    align-items: center; 
 
    transition: flex 0.7s; 
 
    background-size: cover; 
 
    background-position: center; 
 
    flex: 1; 
 
    justify-content: center; 
 
} 
 

 
.item1 { 
 
    background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071); 
 
} 
 

 
.item2 { 
 
    background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077); 
 
} 
 

 
.item3 { 
 
    background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081); 
 
} 
 

 
.item4 { 
 
    background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087); 
 
} 
 

 
.item5 { 
 
    background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081); 
 
} 
 

 

 
/* Flex Items */ 
 

 
.item>* { 
 
    flex: 1 0 auto; 
 
} 
 

 
.item:hover { 
 
    flex: 4; 
 
}

<div class="items"> 
 
    <div class="item item1"> 
 

 
    </div> 
 
    <div class="item item2"> 
 

 
    </div> 
 
    <div class="item item3"> 
 

 
    </div> 
 
    <div class="item item4"> 
 
    </div> 
 
    <div class="item item5"> 
 

 
    </div> 
 
</div>