鼠标在图片上时如何显示大尺寸的图片？

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

更新了，还有文字

最简单的方法是像这样使用z-index

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

示例 sn-p

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