Эффект для аннотаций на CSS3

Когда создаешь статью, часто есть необходимость показать на изображении какие-то важные места. И хочется сделать это наиболее красиво, удобно и понятно. И в этой статье мы рассмотрим как с помощью CSS3 можно создать красивый эффект аннотаций с наложением.

Пример аннотаций можно увидеть здесь

HTML

Вся конструкция состоит из изображения, которое показывается изначально и элементов, которые появляются при клике:

<div class="ao-item">
    <div class="ao-details">
        <h2>Классный эффект для аннотаций на CSS3</h2>
        <p>С помощью аннотаций можно выделять, подчеркивать при показе какие-то места, которым необходимо уделить больше внимания. 
           Кликните на изображение чтобы увидеть эффект.</p>
    </div>
    <div class="ao-preview">
        <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
        <img src="images/Anariel_BlentonTemplate.jpg" alt="image01" />
        <div class="ao-annotations">
            <span>Шапка сайта</span>
            <span>Слайдер</span>
            <span>Популярные новости</span>
            <span>Основные новости</span>
            <span>Нижняя часть сайта или футер</span>
        </div>
    </div>
</div>

CSS

Здесь видно где изменять позицию блоков с описаниями:

.ao-annotations span:nth-child(1) {
    top: 15%;
    left: 5%;
}
 
.ao-annotations span:nth-child(2) {
    top: 20%;
    left: -13%;
}
 
.ao-annotations span:nth-child(3) {
    top: 37%;
    right: 2%;
}
 
.ao-annotations span:nth-child(4) {
    top: 53%;
    right: -8%;
}
 
.ao-annotations span:nth-child(5) {
    bottom: 18%;
    left: -4%;
}

Вывод

Очень полезный способ выделить места на изображении и не только. Если вам приходится часто что-то показывать и объяснять, рекомендую присмотреться к данному способу. Таким образом мы создали великолепные аннотации в CSS.

Пример:

See the Pen эффект для аннотаций на CSS3 by vavik (@vavik96) on CodePen.

Источник