有关图像,示例和现成代码的文字

悬停光标时,文本在图像上出现的五个原始效果。

选项1

文本显示在图像的底部。

代码

选项 2

文本从图像的深处出现,旋转。

代码

Вариант 3

文本从图像的边缘绘制。

代码

Вариант 4.

此变体与之前的变体的不同之处在于弹出文本不是输入到链接中,而是输入到包含链接的块中。

在自定义属性中放置文本 data.

在该实施例中,除了描述之外,还显示图片的标题。

代码

Вариант 5

3D 效果

银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。

代码

代码 1:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</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="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 2:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</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="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 3:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</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="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。"><img src="images/45.jpg" alt=""></a>
</body>
</html>

代码 4:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</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="银湖"
data-description="银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。">
<img class="lac" src="images/131.jpg" alt="" width="400" height="300"&gt
</div>
</body>
</html>

代码 5:


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</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); /* Картинка */
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; /* Размер поля с текстом */
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; /* Размер текста */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">银色湖在Zvenigovsky区,Mari El,俄罗斯。 它位于Suslongersky林业的领土上。 湖泊位于Yushut河流域。

</div>
</div>
</body>
</html>

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注