Fare açıkken büyük boyutlu bir resim nasıl gösterilir?

Question

Bu Web sitem bilmek kadar benzediğini gösteren bir resimdir:

ve ben bir resme fareyi tutmak her şey istiyorum, resim, büyük boyutlarda geldi edilmelidir. Bu kodu verilmiştir:

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> 

ne yapmalı?

Answer 1

yanı metin sahip Güncelleme

bu

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

Numune pasajı gibi z-index kullanarak olurdu en basit

.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>