画像が大きく表示されたときの表示方法

Question

これは私のウェブサイトを知っているルックアップするかを示した画像です：

と私は絵の上にマウスを続けるたびに、その画像が大きなサイズで現れたしなければならないことを望みます。これはコードです：

CSS：

.container { 
     position: relative; 
     margin: 30px auto 0; 
     height: 350px; 
     width: 480px; 
     overflow: hidden; 
     background: white; 
    } 
    .container a { 
     float: left; 
     margin: 2px; 
    } 
    .thumb { 
     position: relative; 
     top: 250px; 
     width: 80px; 
     height: 100px; 
    } 
    .big { 
     position: absolute; 
     top: 10px; 
     left: 1px; 
     width: 500px; 
     height:230px; 
     -webkit-transition: top 1s ease; 
     -moz-transition: top 1s ease; 
     -o-transition: top 1s ease; 
     -ms-transition: top 1s ease; 
     transition: top 1s ease; 
    } 
    a:hover .thumb { 
     -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
     -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
     box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
    } 
    a:hover .big { 

    } 

はHTML：

<div class="container"> 
    <a href="#"> 
     <img class="big" src="http://loremflickr.com/300/300"> 
     <img class="thumb" src="http://loremflickr.com/300/300"> 
    </a> 
    <a href="#"> 
     <img class="big" src="http://lorempixel.com/300/300/"> 
     <img class="thumb" src="http://lorempixel.com/300/300/"> 
    </a> 
    <a href="#"> 
     <img class="big" src="http://loremflickr.com/300/300/dog"> 
     <img class="thumb" src="http://loremflickr.com/300/300/dog"> 
    </a> 
    <a href="#"> 
     <img class="big" src="http://loremflickr.com/300/300/girl"> 
     <img class="thumb" src="http://loremflickr.com/300/300/girl"> 
    </a> 
    <a href="#"> 
     <img class="big" src="http://loremflickr.com/300/300/nature"> 
     <img class="thumb" src="http://loremflickr.com/300/300/nature"> 
    </a> 
    </div> 

何をすべきか？

Answer 1

は、同様にテキストを持つ、更新

この

a:hover .big { 
    z-index: 2; 
} 

サンプルスニペットのようなz-indexを使用することになり、最も簡単な

.container { 
 
    position: relative; 
 
    margin: 30px auto 0; 
 
    height: 350px; 
 
    width: 480px; 
 
    overflow: hidden; 
 
    background: white; 
 
} 
 
.container a { 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
.thumb { 
 
    position: relative; 
 
    top: 250px; 
 
    width: 80px; 
 
    height: 100px; 
 
} 
 
.big { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 1px; 
 
    width: 500px; 
 
    height:230px; 
 
    -webkit-transition: top 1s ease; 
 
    -moz-transition: top 1s ease; 
 
    -o-transition: top 1s ease; 
 
    -ms-transition: top 1s ease; 
 
    transition: top 1s ease; 
 
} 
 
div.big { 
 
    color: white; 
 
    font-size: 40px; 
 
    line-height:115px; 
 
    text-align: center; 
 
} 
 

 
a:hover .thumb { 
 
    -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
 
    -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
 
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5); 
 
} 
 
a:hover .big { 
 
    z-index: 2; 
 
}

<div class="container"> 
 
    <a href="#"> 
 
    <img class="thumb" src="http://loremflickr.com/300/300"> 
 
    <img class="big" src="http://loremflickr.com/300/300"> 
 
    <div class="big"> Hello there 1</div> 
 
    </a> 
 
    <a href="#"> 
 
    <img class="thumb" src="http://lorempixel.com/300/300/"> 
 
    <img class="big" src="http://lorempixel.com/300/300/"> 
 
    <div class="big"> Hello there 2</div> 
 
    </a> 
 
    <a href="#"> 
 
    <img class="thumb" src="http://loremflickr.com/300/300/dog"> 
 
    <img class="big" src="http://loremflickr.com/300/300/dog"> 
 
    <div class="big"> Hello there 3</div> 
 
    </a> 
 
    <a href="#"> 
 
    <img class="thumb" src="http://loremflickr.com/300/300/girl"> 
 
    <img class="big" src="http://loremflickr.com/300/300/girl"> 
 
    <div class="big"> Hello there 4</div> 
 
    </a> 
 
    <a href="#"> 
 
    <img class="thumb" src="http://loremflickr.com/300/300/nature"> 
 
    <img class="big" src="http://loremflickr.com/300/300/nature"> 
 
    <div class="big"> Hello there 5</div> 
 
    </a> 
 
</div>