[Dilettante_Pro]

Как-то так?

<style>
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}
.block-1,
.block-2,
.block-11,
.block-101,
.block-301 {
box-shadow: 10px 20px 30px gray;
height: 100px;
}
.content {
  display: block;
  width: 96%;
  height: 150px;
  background: #fafafa;
}

</style>
<div class="content">

<div class="blocks block-1">1</div>
<div class="blocks block-2">2</div>
<div class="blocks block-11">11</div>
<div class="blocks block-101">101</div>
<div class="blocks block-301">301</div>

</div>
<script>
[].forEach.call(document.querySelectorAll('.block-1'), function(node) {
	var bsh = getComputedStyle(node).boxShadow;
	node.style.boxShadow = "inset "+bsh;
});
[].forEach.call(document.querySelectorAll('.blocks'), function(node) {
	node.onmouseover = function() {
	    document.querySelector('.content').style.boxShadow = getComputedStyle(node).boxShadow;
        }
	node.onmouseleave = function() {
	    document.querySelector('.content').style.boxShadow = "";
        }
});
</script>