.test-gallery { overflow: hidden; padding: 5px; } .test-gallery ul { margin: 0 0 0 -10px; padding: 0; } .test-gallery li { float: left; margin: 0 0 10px 10px; padding: 0; list-style: none; } .test-gallery a { display: block; position: relative; overflow: hidden; width: 100px; height: 100px; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,.5); border: 1px solid #DADADA; background: #FFF; -moz-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } .test-gallery a:hover { box-shadow: none; border: 1px solid #ADADAD; background: #F9F9F9; } .test-gallery a::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .test-gallery a::after { content: ""; position: absolute; top: -30%; left: -30%; width: 500%; height: 500%; border-radius: 100%; box-shadow: 0 0 100px rgba(255,255,255,.9); } .test-gallery li:nth-child(3) a::after { top:-370%; left:-370%; box-shadow:inset 0 0 100px rgba(255,255,255,.5); } .test-gallery li:last-child a::after { top:-370%; left:-370%; } .test-gallery img { display: inline; max-width: 100px; max-height: 100px; vertical-align: middle; }
<div class="test-gallery"> <ul> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/natidok/view/606766?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6512/46829955.53/0_9422e_323047fe_XS" alt=""></a></li> <li class="revers"><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/lasto4ka79/view/447972?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6412/82384591.3e/0_6d5e4_da219112_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/drakont1/view/574028?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6512/69861747.3a/0_8c24c_3bd5f0f1_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/tipusa/view/491869?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6410/40494703.15/0_7815d_96b3601e_-2-XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/Kozandrevna/view/975219?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6412/39970978.253/0_ee173_6a80fe8a_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/akella225/view/518444?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6411/41816034.1/0_7e92c_36396ffe_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/n-klimckina/view/437996?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6511/117156385.12/0_6aeec_41183f4c_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/frau-milova2011/view/482703?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6512/106981434.22/0_75d8f_a373dbbc_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/Atachenka/view/564387?page=1&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6413/72075847.13/0_59e29_eecf58d4_XS" alt=""></a></li> <li><a href="http://fotki.yandex.ru/search/%D0%BA%D0%BE%D1%82%D1%8B/users/natidok/view/606766?page=0&how=week&type=image" target="_blank"><img src="http://img-fotki.yandex.ru/get/6512/46829955.53/0_9422e_323047fe_XS" alt=""></a></li> </ul> </div>