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>