Как написать текст на фото CSS

Добавить на картинке надпись можно в любом графическом редакторе, а потом только вставить изображение в блог, в статью. Но иногда нужно исправить или поменять надпись и приходится писать на картинке текст заново. А с помощью css надпись на картинке сделать не сложно, она не утяжелит её и текст всегда можно поменять.

Эффекты с изображением и текстом

Начнём с необычного наложения текста, только не на картинку, а на другой текст.
Код:

<div id="vottak">
<h5>
Текст под...</h5>
<h6>
Текст сверху</h6>
</div>
<style type="text/css">
#vottak {
  position: relative;
  text-align: center;
}
#vottak h5 {
  color: #1e4acd;  /* цвет текста внизу */
  font-family: Georgia;
  font-size: 80px;  /* размер текста внизу */
  letter-spacing: -6px;
  margin: 0;
  opacity: .9;
  padding: 0;
  -moz-transform: skew(20deg);
  -o-transform:skew(20deg);
  -webkit-transform: skew(20deg);
}
#vottak h6 {
  z-index: 100;
  color: #f5ff00;  /* цвет текста вверху (маленький) */
  font-family: Verdana;
  font-size: 40px;  /* размер текста */
  letter-spacing: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 26px;
  left: 120px;
}
#vottak > h6:hover span {
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -webkit-transform: scale(2);
  zoom: 2;
}
</style>

Всплывающая подсказка, при наведении курсора на картинку 

Код:

<figure class="imger">
    <img height="379" width="737" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7SKrKNiA_ucTVMtM3bEKUM0z7xzUWjBm7q-SBwI-n9NjsBCxfFoVwl1W1XE0eICTNysiTNdFekkfOmeBgIpMxf0H12D_rIGN3QEli6IBahyphenhyphenI_AHfvc29wOt12dbrOZzgb-8aHLNOTW6T/s1600/ozero.jpg" alt="озеро"/>
    <figcaption><strong>Название картинки</strong>Текст для картинки (описание)</figcaption>
</figure>
<style>
.imger {
  position: relative;
  display: table;
  margin: 0 auto;
  border: 2px solid #151;  /* размер и цвет рамки */
  line-height: 0;
  color: rgb(223,223,223);  /* цвет текста описания */
  cursor: pointer;
}
.imger:hover:after {content: none;}
.imger figcaption {display: none;}
.imger:hover figcaption {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(68,85,102,.7);
  font-size: 80%;
  line-height: 1.3em;
}

.imger:hover figcaption strong {
  display: block;
  line-height: 2em;
  font-size: 110%;
}
</style>

Красным выделила размеры вашего изображения.
Синим - адрес картинки
Оранжевым - альт картинки (пояснение)
Поменять можно и другие параметры, но если плохо разбираетесь в коде, остальное лучше не менять или поэкспериментируйте на тестовом блоге.

Без эффектов, только текст на картинке

Код:

<div style="position: relative;">
<img alt="река" border="0" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3S3RMRDeCMkBfQZYQrFnsvE8vgu9pMw5DY_6zI49Grym0mAcZtkOQbXyO2wGW7nBNThWoi8EMhf7CYDqqPBTU5HL-DsFezc49KuXvFLaxQJvDiAuO60DUd0PX5kByxAnBVCc67H3BjSnJ/s1600/reka" width="658" />
<div style="font-family: Courier; font-size: 15px; color: #ffffff; font-weight: bold; left: 50px; position: absolute; text-indent: 0px; top: 30px; width: 350px;">
Текст на картинке или стих
</div>
<div style="font-family: Courier; font-size: 15px; color: #ffffff; font-weight: bold; left: 340px; position: absolute; top: 290px; width: 150px;">
Текст (автор)</div>
</div>

Что можно поменять:
Красным выделила место, где пишем альт (описание изображения)
Оранжевым - высоту и ширину картинки, соответственно
Салатовым - адрес картинки
font-family: Courier - название шрифта
15px - размер шрифта
#ffffff - цвет шрифта
bold - жирность шрифта 

top: 30px; width: 350px;" - цифры означают расположение текста
font-family: Courier; font-size: 15px; color: #ffffff - шрифт, размер, цвет текста внизу. Это может быть автор фотографии, стихотворения, короткий текст об изображении.

Подсказка с затемнённым фоном

Код:

<div class="container">
<img alt="озеро разноцветное" src="ссылка" title="" />
<div>
ваш текст</div>
</div>
<style>
.container {
    display:inline-block; 
    position:relative;
}
.container div {
    display: inline-block;
    position: absolute;
    bottom: 10px; left: 0px;
    background-color: rgba(0,0,0,.4);
    padding: 5px 5px 5px 10px;
    color: white
}</style>

Только название картинки

<div class="examp">текст</div>
<style>
.examp {
      padding-top:20px;
      width:600px;  /* ширина изображения */
      padding-left:20px;
      height:300px;  /* высота изображения */
      background-image:url("адрес изображения");
      color:#bee;  /* цвет текста */
      font-family:Arial, Helvetica, sans-serif;   /* шрифт */
      font-size:40px;   /* размер букв */
}</style>

Всплывающая снизу, затемнённая подсказка

Код:

<div class="alt">
<div style="text-align: center;">
<img src="ссылка на картинку" /></div>
<div class="caption">
<span class="title">Название</span>
<span class="info">текст.
</span></div>
</div>
<style>
.ozero {
  width: 100%;
  max-width: 700px;
  margin: 10px;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.ozero:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.ozero img {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ozero .caption {
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  text-align: center;
}
.ozero .caption span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.ozero .caption .title {
  line-height: 1;
  font-weight: normal;
  font-size: 18px;
}
.ozero .caption .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}
.ozero:focus:before,
.ozero:focus span, .ozero:hover:before,
.ozero:hover span {
  opacity: 1;
}
.ozero:focus:before, .ozero:hover:before {
  top: 50%;
}
.ozero:focus span, .ozero:hover span {
  top: 0;
}
.ozero:focus .title, .ozero:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.ozero:focus .info, .ozero:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}</style>

В статье использовались материалы:
http://shpargalkablog.ru
http://dbmast.ru