Five examples of the appearance of text in images. Ready code.
Example 1
Text appears from the depth of the image.
Example 2
Text appears from the depth of the image, rotating.
Example 3
Text extends from the edges of the image.
Example 4.
Pop-up text
Example 5
3D effect
Code 1:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Text on Pictures</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}
.lake:before {
display: block;
background-color: rgb(0, 0, 0);
content: "";
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.lake:after {
font-family: 'Lucida Console';
color: white;
content: attr(alt);
display: block;
font-size: 16px;
opacity: 0;
padding: 0 3%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
width: 94%;
z-index: 3;
}
.lake img {
border: none;
display: block;
z-index: 1;
}
.lake:after {
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
.lake:hover:before {
opacity: 0.6;
}
.lake:hover:after {
opacity: 1;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
</style>
</head>
<body>
<a class="lake" href="#" title="" alt="Silver - a lake in Zvenigovo district, Mari El, Russia, is in the basin of the Yushut river in the military forest enterprise Suslonger"><img src="images/45.jpg" alt=""></a>
</body>
</html>
Code 2:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Text on Pictures</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}
.lake:before {
display: block;
background-color: rgb(0, 0, 0);
content: "";
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
}
.lake:after {
font-family: 'Lucida Console';
color: white;
content: attr(alt);
display: block;
font-size: 16px;
opacity: 0;
padding: 0 3%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
width: 94%;
z-index: 3;
}
.lake img {
border: none;
display: block;
z-index: 1;
}
.lake:after {
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
.lake:hover:before {
opacity: 0.6;
}
.lake:hover:after {
opacity: 1;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
.lake:after {
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%);
}
.lake:hover:after {
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%);
}
</style>
</head>
<body>
<a class="lake" href="#" title="" alt="Silver - a lake in Zvenigovo district, Mari El, Russia, is in the basin of the Yushut river in the military forest enterprise Suslonger"><img src="images/45.jpg" alt=""></a>
</body>
</html>
Code 3:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Text on Pictures</title>
<style>
@-webkit-keyframes appearing {
0%{
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}
@keyframes appearing {
0%{
transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}
@-webkit-keyframes disappearing {
0%{
-webkit-transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
}
@keyframes disappearing {
0%{
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(4) scaleY(0) translateY(-50%);
}
}
@-webkit-keyframes positioning {
0%{
z-index: 10;
}
99%{
z-index: 10;
}
100% {
z-index: 1;
}
}
@keyframes positioning {
0%{
z-index: 10;
}
99%{
z-index: 10;
}
100% {
z-index: 1;
}
}
.lake {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
}
.lake:before {
-webkit-animation: disappearing 500ms ease-in-out forwards;
animation: disappearing 500ms ease-in-out forwards;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0);
content: attr(alt);
display: block;
font-family: 'Lucida Console';
font-size: 16px;
padding: 5% 2%;
position: absolute;
text-transform: none;
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
width: 96%;
z-index: 5;
}
.lake img {
-webkit-animation: positioning 510ms ease-in-out forwards;
animation: positioning 510ms ease-in-out forwards;
border: none;
display: block;
position: relative;
z-index: 10;
}
.lake:after {
opacity: 0;
background-color: white;
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 15;
}
.lake:hover:before {
-webkit-animation: appearing 500ms ease-in-out forwards;
animation: appearing 500ms ease-in-out forwards;
}
</style>
</head>
<body>
<a class="lake" href="#" title="" alt="Silver - a lake in Zvenigovo district, Mari El, Russia, is in the basin of the Yushut river in the military forest enterprise Suslonger"><img src="images/45.jpg" alt=""></a>
</body>
</html>
Code 4:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Text on Pictures</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before {
box-sizing: border-box;
position: absolute;
width: 100%;
padding: 20px;
color: #fff;
transition: transform .4s ease-out;
}
.lake:after {
content: attr(data-title);
top: 0;
height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before {
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
<div class="lake"
data-title="Silver Lake"
data-description="Silver - a lake in Zvenigovo district, Mari El, Russia, is in the basin of the Yushut river in the military forest enterprise Suslonger">
<img class="lac" src="images/131.jpg" alt="" width="400" height="300">
</div>
</body>
</html>Code 5:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Text on Pictures</title>
<style>
.lake {
width: 640px;
height: 420px;
margin: 70px auto;
perspective: 1000px;
}
.lake .efekt {
display: block;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(images/0.jpg); /* Picture */
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.lake:hover .efekt {
transform: rotateX(80deg);
transform-origin: bottom;
}
.lake .efekt:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px; /* Size of the text field */
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.lake .efekt .descriptions {
color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
font-size: 18px; /* Text size */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">Silver - a lake in Zvenigovo district, Mari El, Russia, is in the basin of the Yushut river in the military forest enterprise Suslonger
</div>
</div>
</body>
</html>
