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

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

选项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;

}

代码 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">

    </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>

祝你创造性的成功。

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

Добавить комментарий