Прошу помощь, надо, чтобы в тексте были размещены небольшие картинки, которые обтекает текст. При наведении на картинку, она увеличивается до реальных размеров. Собственно сделал всё, чтобы так и было, но между блоком с маленькой картинкой и обтекаемым текстом нет отступов. Текст полностью прилипает к маленькой картинке. Как сделать, чтобы отступы появились. Снизу мой код и стили.
<body>
<div class="post">
<div class="tema">
<p>Длинный текст</p>
<a class="thumbnail" href="#"><img src="1.jpg" width="20%" border="0" align="left"/><span><img src="1.jpg"/></span></a>
<p>Длинный текст</p>
</div>
</div>
</body>
Стили следующие:
.post {
position: relative;
max-width:804px;
margin:20px auto;
z-index: 0;
}
.tema img {
max-width: 100%;
}
.tema>a{
font-size: 1.5em;
font-weight: 400;
}
.tema>p{
font-size: 1em;
font-weight: 300;
text-align: justify;
margin-top: 0.5em;
margin-bottom: 1em;
}
.sidebar {
float:left;
width:20%;
background-color: #D7F404;
min-height: 100px;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
left: 0px;
border: 1px solid white;
visibility: hidden;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: center;
left: center;
z-index: 200;
/*position where enlarged image should offset horizontally */
}
