Доброе утро товарищи.
что то я туплю
есть код:
<!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>
</html>
выводится следующим кодом:
<body>
<a class="lake" href="#" title="" alt=""><img src="" alt=""></a>
</body>
теперь собственно вопрос:
первый код запихиваю в кастом CSS
делаю блок с картинкой в PB
задаю название описание ссылку
прописываю CSS класс
отработка кода идет, но не подтягивает ни титл ни описание ни ссылку
если прописывать чисто кодом то все работает
я понимаю что в коде вывода класс задан сразу для всего
а в PB вывожу аддон image
не могу понять что дописать в верхний код что бы выводились титл описание и работала ссылка
27.10.2017, 11:08:04