Отображать изображение над другим связанным изображением при наведении курсора мыши, используя только CSS

Question

Я хочу, чтобы изображение big.png отображалось на mouseover выше связанного изображения. И после того, как он отображается, его можно щелкнуть, чтобы отправить по указанной ссылке.

Никакого JavaScript не требуется. Только CSS.

Я не получаю должность mouseover изображение правильное...

<style>

.brands-listing{
    width:100%;
    padding:10%;
    list-style:none;
}

.brands-listing li{
    width:25%;
    display:inline;
    margin-right:50px;
}

div {
    display: none;

}

a:hover > div {
    display: block;
    position: relative;
    top:-100px;
}

</style>

HTML

<ul class="brands-listing">
    <li>
        <a href="#">
          <img class="hover-image" alt="Flying Saucer" src="1.png" width="230" height="60">
          <div>
            <img alt="Flying Saucer" src="big1.png" width="280" height="120">
          </div>
        </a>
    </li>


    <li href="#">
        <a>
         <img class="hover-image" alt="Open House" src="2.jpg" width="230" height="60">
         <div>
          <img alt="Open House" src="big2.png" width="280" height="120">
         </div>
        </a>
    </li>

    <li>
        <a href="#">
          <img class="hover-image" alt="Flying Saucer" src="3.png" width="230" height="60">
           <div>
             <img alt="Flying Saucer" src="big3.png" width="280" height="120">
           </div>
        </a>
    </li>


    <li>
        <a href="#">
          <img class="hover-image" alt="Open House" src="4.png" width="230" height="60">
          <div>
            <img alt="Open House" src="big4.png" width="280" height="120">
          </div>
        </a>
    </li>

</ul>