<style type="text/css">
.hoverBoxBox {width:700px; height:437px; margin:0 auto; border:20px solid #fc6; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
background: url(bw1.jpg), url(bw2.jpg), url(bw7.jpg), url(bw1.jpg);
background-position: 0 -500px, 0 -500px, 0 -500px, 0 0;
background-repeat: no-repeat;
-webkit-transition: 0s 9999999s;
-moz-transition: 0s 9999999s;
-ms-transition: 0s 9999999s;
-o-transition: 0s 9999999s;
transition: 0s 9999999s;
}
.hoverBox {padding:10px; margin:10px; border:1px solid #aaa; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
img.pic1:hover ~ .hoverBoxBox {border-color: #c6f;
background-position: 0 0, 0 -500px, 0 -500px, 0 -500px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
img.pic2:hover ~ .hoverBoxBox {border-color: #6fc;
background-position: 0 -500px, 0 0, 0 -500px, 0 -500px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
img.pic3:hover ~ .hoverBoxBox {border-color: #6cf;
background-position: 0 -500px, 0 -500px, 0 0, 0 -500px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
</style>
<img src="bw1t.jpg" alt="" class ="hoverBox pic1">
<img src="bw2t.jpg" alt="" class ="hoverBox pic2">
<img src="bw7t.jpg" alt="" class ="hoverBox pic3">
<br><br><br>
<div class ="hoverBoxBox"></div>