html - How to show a large size of an picture when the mouse is on it? -

this image shows website looks know:

and want everytime keep mouse on picture, picture should showed in large size. code:

css:

    .container {         position: relative;         margin: 30px auto 0;         height: 350px;         width: 480px;         overflow: hidden;         background: white;     }     .container {         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> 

what do?

updated, having text well

the simplest using z-index this

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

sample snippet

.container {    position: relative;    margin: 30px auto 0;    height: 350px;    width: 480px;    overflow: hidden;    background: white;  }  .container {    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>