Прилипание текста к картинке

k1fazoid · July 6, 2017

Прошу помощь, надо, чтобы в тексте были размещены небольшие картинки, которые обтекает текст. При наведении на картинку, она увеличивается до реальных размеров. Собственно сделал всё, чтобы так и было, но между блоком с маленькой картинкой и обтекаемым текстом нет отступов. Текст полностью прилипает к маленькой картинке. Как сделать, чтобы отступы появились. Снизу мой код и стили.

<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 */  
}

AlexZaw · July 6, 2017

задайте margin картинке

Sign In

Прилипание текста к картинке

Question

k1fazoid

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information