Как сделать подпись к фотографии в html
Обновлено: 02.07.2024
По просьбе подписчицы сегодня расскажу как правильно подписать картинку. Тема актуальна практически для любого сайта. Итак, поехали!
Для начала нужно знать, что писать, если картинка до сих пор прогружается. С каждым было, признайтесь! Заходите вы на сайт, а там вместо картинки краш какой-то. Серая субстанция. Чтобы вместо этой серой субстанции что-то было, используйте атрибут alt тэга img . Выглядит так:
А теперь как правильно подписать картинку. Подписать ее можно сверху или снизу. Изредка даже сбоку, но так лучше не делать, потому что неизвестно что получите. Сверху и снизу - наилучший вариант. Допустим, на вашем сайте есть статья про колобка. Вам нужно поместить картинку с колобком и подписать ее. Наилучший вариант - использование тэга . В примере я размещу подпись снизу картинки.
Выглядеть код будет примерно так:
Что мы тут сделали? Мы добавили в контейнер картинку, а внизу с помощью подписали ее, а в таблицах стилей мы еще и отцентрировали эту подпись под картинкой. Если у вас картинка сбоку - не беда. Можете написать отступ подписи от левого или правого края. Кстати, отцентрировать контент можно также с помощью стилевых средств align-items и justify-content . У этих средств имеется параметр "center" . Эти ребята отвечают за горизонтальное и вертикальное выравнивание контента. Но об этом чуть позже, когда будем беседовать с вами про CSS . Беседа будет долгая :D
Веб-разработчики уже не раз убедились в том, насколько широкими являются возможности CSS3 – каскадных таблиц стилей третьего поколения, ведь с их помощью сегодня можно реализовать вещи, для которых не так давно требовалось обязательно знать JavaScript.
В этом уроке вы увидите, как можно сделать подписи к картинкам с помощью CSS3. На странице предоставлены только некоторые части кода, а для того, чтобы вы могли попрактиковаться, в конце этой статьи дана ссылка для скачивания всех файлов, включая HTML-страницу, файл style.css и изображения. Вот что мы будем делать:
Итак, у нас будет шесть различных примеров подписей к изображениям. HTML-часть нашего проекта выглядит так (разверните, чтобы увидеть):
Все стили мы сохраним в отдельном документе style.css , чтобы не нагружать HTML-страницу. Не забудьте включить на него ссылку внутри тега :
Приступим к созданию стиля CSS:
Добавим несколько общих характеристик для наших box-ов, а также float: left для выравнивания элемента по левому краю, чтобы остальные боксы следовали друг за другом. Не стоит забывать и о свойстве overflow со значением hidden – благодаря этому всё то, что находится за пределами бокса, будет спрятано.
Также устанавливаем свойство transition для всех картинок:
Часть первая
Теперь перейдем к подписям: к ним также будут применены некоторые общие характеристики и, конечно же, свойство transition . Вместо того, чтобы использовать параметр opacity , мы лучше вспомним о цветовой модели RGBA, где для альфа-канала, отвечающего за прозрачность цвета, зададим значение 0.7 , чтобы сделать фон для подписи слегка прозрачным, не затрагивая при этом текст:
Пример 1
Наш первый пример, пожалуй, один из самых простых – подпись к фото появляется снизу вверх при наведении курсора мыши. Для нее мы установим фиксированную высоту в 40px и нижнее положение элемента в -40px , чтобы оно было скрыто под изображением, когда курсор не наведен:
Пример 2
Пример 3
В этом примере мы рассмотрим эффект плавного затухания. Для исходного состояния устанавливаем нулевое значение прозрачности opacity :
Пример 4
Пример 5
Здесь мы применим эффект вращения, при этом проворачиваться будет не только подпись, но и сама картинка. Для этого нам нужно добавить свойство transform , установив значение поворота на -180deg :
Пример 6
В последнем случае мы используем так называемый эффект масштабирования. И если в предыдущих вариантах текст появлялся одновременно с фоном, то сейчас он будет отображаться с задержкой и частями – сначала заголовок h3 , а следом текст p :
Часть вторая: оживление
В этом разделе урока мы определим поведение каждого из элементов при наведении курсора на соответствующее изображение.
Поведение 1
Поведение 2
Поведение 3
По правде сказать, данный пример является наиболее легким: когда курсор находится на изображении, opacity принимает значение 1 , таким образом делая подпись видимой:
Поведение 4
Как говорилось выше, четвертый заголовок будет скользить с одной стороны в другую. Следовательно, нам необходимо сдвинуть не только сам текст, но и картинку.
При наведении курсора элемент будет двигаться до тех пор, пока не покажется на 100%. Заметьте, что для прокрутки по горизонтали мы используем функцию translateX :
Поведение 5
Когда курсор наведен, контейнер div вместе с картинкой и заголовком будет прокручиваться против часовой стрелки — -180deg , скрывая изображение и открывая подпись:
Поведение 6
В этом примере содержится несколько эффектов сразу. Когда курсор расположен на картинке, она увеличивается — за это отвечает значение scale(1.3) :
Вы можете скачать архив с файлами, чтобы поработать с этим кодом самостоятельно. Мы надеемся, что данный урок пригодится вам. Желаем удачных экспериментов и творческих успехов!
Здравствуйте.
Начал оформлять свои заметки на сайте на платформе ucoz и столкнулся с проблемой, что мне нужно сделать подпись к фотографии, а весь текст (несмотря на теги. которые я пишу - перепробовал вагон вариантов и всё не то) всё равно оказывается справа от них, в общей куче.
Подскажите, пожалуйста, что нужно написать, чтобы текст был строго под определённой картинкой
Вставка картинки и подпись под картинкой
помоги пожалуйста с элементарщиной вот задание 3 поместите в тело документа image изображение 4.
Текст под картинкой
Всем привет!! Ходил по поиску но к сожалению не нашел решения. Мне нужно чтоб под картинкой по.
Текст под картинкой
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И сказали чтобы я выложил.
Иногда изображения, которые вы вставили на веб-страницы, могут не отображаться.
Причиной этому могут быть:
1) Некоторые пользователи при просмотре веб-страниц могут принудительно отключать показ изображений на веб-страницах. Обычно это делается с целью экономии трафика при работе на слабом канале Интернет.
2) Пользователи могут просматривать ваш сайт на старых мобильных устройствах.
3) У изображения поменялось имя или адрес, либо было удалено.
4) Вы указали ошибочный путь к изображению.
Во всех этих случаях изображение не будет отображаться на веб-странице.
Что в этом случае вместо него выводить браузеру?
Можно вообще ничего не выводить. В этом случае на месте изображения будет отображаться пустое пространство. Но, в HTML есть возможность вместо пустого пространства показывать альтернативный текст, который будет выводиться, если не возможно отобразить само изображение.
Атрибут, который отвечает за создание такого альтернативного текста называется:
Вот пример его использования:
Выглядеть описание изображения с атрибутом alt будет примерно вот так (все будет зависеть от конкретного браузера):
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Есть еще одна проблема, с которой можно столкнуться при работе с изображениями. Иногда нужно для некоторых из них добавить поясняющие надписи, по которым можно понять, что они собой представляют.
Обычно эти надписи появляются, когда пользователь наводит курсор мыши на интересующие их изображения. Выглядит это следующим образом:
Создать такую надпись можно с помощью атрибута для тэга img, который называется:
Этот атрибут задает описание изображения, которое будет появляться при наведении на него курсора мыши.
Давайте рассмотрим пример и посмотрим, как это может работать на практике.
Наведите на изображение в следующем примере курсор мыши.
Как правило, поисковые системы использует значение атрибута title для того, чтобы индексировать изображения и выдавать их в результатах поиска в своих разделах "Картинки".
Поэтому, вы можете использовать этот атрибут, чтобы иметь возможность продвигаться в результатах поиска в картинках. Но, не стоит слишком перебарщивать и всем картинкам на вашем сайте добавлять title. Все должно быть в меру и за это поисковые системы могут снизить позиции вашего сайта в выдаче. Знаю одного парня, у которого был подобный опыт.
На этом все. 2 атрибута, которые позволяют добавлять описание и альтернативный текст вашим изображениям:
Читайте также: