Test 1

Testin an debuging code

by Adamatis

HTML

http://www.slice-art.ru/nashidveri/images/catalog/mezhkomnatnie/milyana_update/1.jpg
<div class="d_plitka">
  <a data-spotlight="on" data-lightbox="transitionIn:elastic;transitionOut:elastic;" title="Палермо" href="http://www.slice-art.ru/nashidveri/images/catalog/mezhkomnatnie/bonaveri/big/1.jpg" style="position: relative; overflow-x: hidden; overflow-y: hidden" class="spotlight">
    <span class="reflect" style="width: 74px; height: 240px; overflow-x: hidden; overflow-y: hidden">
      <img class="reflected" border="0" src="http://www.slice-art.ru/nashidveri/images/catalog/mezhkomnatnie/bonaveri/1.jpg" style="display: block; border: 0px">
      <canvas width="74" height="60" style="display: block; border-top-color: currentColor; border-left-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; background: #cccccc;"></canvas>
    </span>
    <div class="overlay-default" style="position: absolute; visibility: visible; width: 74px; height: 240px; top: 0px; left: 0px; opacity: 0; display: none">
      <div></div>
    </div>
  </a>
  <h3 class="door_name">Палермо</h3>
</div>
    
    
<!-- Эта верстка получилась после, изначальная верстка: так выглядит
    
  <div class="d_plitka">
    <a data-spotlight="on" data-lightbox="transitionIn:elastic;transitionOut:elastic;" title="Палермо" href="http://www.slice-art.ru/nashidveri/images/catalog/mezhkomnatnie/bonaveri/big/1.jpg">
      <img class="reflect" border="0" src="http://www.slice-art.ru/nashidveri/images/catalog/mezhkomnatnie/bonaveri/1.jpg">
    </a>
	<span class="d_name">Палермо</span>
  </div>
-->

CSS

.reflect {
	position: relative;
	margin-bottom: 20px;
}
.reflect img{
	margin: 0 auto;
}
canvas{
	margin: 0 auto;
}
.reflected{
	-moz-box-shadow: 0px 1px 3px #888;
	-webkit-box-shadow: 0px 1px 3px #888;
	box-shadow: 0px 1px 3px #888;
}
.d_plitka{
	display: block;
	width: 200px;
	float: left;
	margin-bottom: 50px;
}
.d_name{
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0px;
}
.door_name{
	text-align: center;
	width: 200px;
	display: absolute;
	bottom: 20px;
}