Как написать текст сверху картинки html css
как наложить текст на картинку html
- Текст сверху картинки по центру.
- Текст сверху картинки в левом углу
- При наведении на картинку появляется текст html
Текст сверху картинки по центру.
Как поставить картинку по центру картинки!? Как вообще написать текст на картинке html?
Нам понадобится блок div с id "
Позиция будет "position: relative;"
Во внутрь поместим картинку и новый блок div с class-ом "
И далее нужно позиционировать данный блок с текстом по центру во вертикали и по горизонтали.
<div id="tekst_sverhu_kartinki">
<img src="https://dwweb.ru/__img/__img_rotate/more.png " alt="Текст сверху картинки">
<div class="tekst_sverhu_kartinki">Текст сверху картинки</div>
</div>
<style>
div#tekst_sverhu_kartinki {
position: relative;
}.tekst_sverhu_kartinki {
position: absolute;
top: 50%;
left: 65px;
text-transform: uppercase;
color: white;
width: 350px;
background: #00000094;
padding: 10px;
text-align: center;
font: bold 24px/34px Helvetica, Sans-Serif;
}
</style>
Результат "как написать текст поверх картинки в html":

Текст сверху картинки в левом углу
Для того, чтобы поставить текст сверху картинки в html. Нам понадобится каркас div внутри картинка img + span
<div id="tekst_sverhu_kartinki">
<img src="https://dwweb.ru/__img/__img_rotate/more.png " alt="Текст сверху картинки">
<div class="tekst_sverhu_kartinki_1">
<span>Наш отдых</span><br>
<span>Лучшие моменты</span>
</div>
</div>
Позиционируем текст поверх картинки с помощью css:
div#tekst_sverhu_kartinki {
position: relative;
}
.tekst_sverhu_kartinki_1 {
position: absolute;
bottom: 10%;
text-transform: uppercase;
color: #c9c9c9;
width: 300px;
}
.tekst_sverhu_kartinki_1 span {
font: bold 24px/44px Helvetica, Sans-Serif;
background: #00000094;
padding: 8px;
}
Пример : Текст сверху картинки в левом углу

Лучшие моменты
При наведении на картинку появляется текст html
Не стал делать отдельным пунктом - текст справа. Этот вариант можно немного модифицировать(убрать hover и у текста убрать opacity: 0) и будет у вас тест справа на картинке.
<div id="tekst_sverhu_kartinki_sprava_1">
<img src="https://dwweb.ru/__img/__img_rotate/more.png " alt="Текст сверху картинки">
<div class="tekst_sverhu_kartinki_sprava_1 ">
<span>Наш отдых</span><br>
<span>Лучшие моменты</span>
</div>
</div>
div#tekst_sverhu_kartinki_sprava_1{
position: relative;
width: 500px;
}
#tekst_sverhu_kartinki_sprava_1:hover .tekst_sverhu_kartinki_sprava_1 {
transition: 2s;
opacity: 1;
cursor: pointer;
}
.tekst_sverhu_kartinki_sprava_1 {
position: absolute;
bottom: 10%;
text-transform: uppercase;
color: #c9c9c9;
width: 300px;
right: 0px;
text-align: right;
opacity: 0; transition: 2s;
}
.tekst_sverhu_kartinki_sprava_1 span {
font: bold 24px/44px Helvetica, Sans-Serif;
background: #00000094;
padding: 8px;
}
Пример появления текст на картинке html

Лучшие моменты
текст поверх картинки html
как сделать текст поверх картинки в html
как написать текст поверх картинки в html
как вставить текст поверх картинки html
как наложить текст на картинку html
текст при наведении на картинку в html
при наведении на картинку появляется текст html
как сделать текст поверх картинки в html
картинка с текстом html css
картинка над текстом html
как сделать текст над картинкой в html

подробнее.
подробнее.