Untitled

<body>
<section id="pics" class="clearfix">
        <figure
            id="pic1"
            class="pictures"
        >
            <img
                alt="figure1"
                src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
                title="pic1"
            >
            <figcaption class="figuredetails">Fig1</figcaption>

        </figure>


        <figure
            id="pic2"
            class="pictures"
        >
            <img
                alt="figure2"
                src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
                title="pic2"
            >
            <figcaption class="figuredetails">Fig2</figcaption>

        </figure>
    </section>
    <section id="content">
    <p>hello</p>
    </section>
</body>

@CHARSET "UTF-8";

#pics{

    width:100%;
    padding: 50px 50px;
}

.pictures{
    float: left;
    width:200px;
    height:200px;
    box-shadow: 10px 10px 5px #888888;
}


.pictures img{
    width:100%;
    height:auto;


}

#pic1{

    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    z-index: -1
}


#pic2{
    position: absolute;
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    /* z-index: -2; */

}

#content{
    clear: both;
}

.pictures > .figuredetails{
    color: red;
    padding-left: 20px;
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

function pichoverfunc() {
    $(this).css({"z-index":10});
}

function pichoverfuncO() {
    $(this).css({"z-index":-10});
}


$(document).ready(

        $("#pic2").hover(pichoverfunc, pichoverfuncO)
        );

#pic2{
    position: absolute;
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    /* z-index: -2; */

}

#pic2:hover{
z-index:10;
}

.img-hover:hover{
z-index:10;
}

img:hover{
...
}

<body>
 <img
     id="pic1"
     alt="figure1"
     src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
     title="pic1"
 >
 <img
     id="pic2"
     alt="figure2"
     src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
     title="pic2"
 >
</body>

function handlerIn() {
    $('img').css({"z-index": -10}); //Push all images back
    $(this).css({"z-index": 10}); //Bring our target to front
}

function handlerOut() {
    $('img').css({"z-index": 10}); //Bring all our images to front
    $(this).css({"z-index": -10}); //Push target back
}

$(document).ready(function(){
    $("img").hover(handlerIn, handlerOut);
});

img {
    position: relative;
    width:200px;
    height:200px;
    box-shadow: 10px 10px 5px #888888;
}

#pic1{
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

#pic2{
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}