Как написать текст на фото 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>
Всплывающая подсказка, при наведении курсора на картинку <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>
Код:
Синим - адрес картинки
Оранжевым - альт картинки (пояснение)
Поменять можно и другие параметры, но если плохо разбираетесь в коде, остальное лучше не менять или поэкспериментируйте на тестовом блоге.
Без эффектов, только текст на картинке
Код:
Что можно поменять:
Красным выделила место, где пишем альт (описание изображения)
Оранжевым - высоту и ширину картинки, соответственно
Салатовым - адрес картинки
font-family: Courier - название шрифта
15px - размер шрифта
#ffffff - цвет шрифта
bold - жирность шрифта
top: 30px; width: 350px;" - цифры означают расположение текста
font-family: Courier; font-size: 15px; color: #ffffff - шрифт, размер, цвет текста внизу. Это может быть автор фотографии, стихотворения, короткий текст об изображении.
Подсказка с затемнённым фоном
Код:
Только название картинки
Код:
В статье использовались материалы:
http://shpargalkablog.ru
http://dbmast.ru
<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>
Красным выделила размеры вашего изображения.<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 - жирность шрифта
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>
<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>
Всплывающая снизу, затемнённая подсказка
<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>
<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
Комментарии со спамом удаляются.