0 Пользователей и 1 Гость просматривают эту тему.
  • 2 Ответов
  • 466 Просмотров
*

lexxbry

  • Живу я здесь
  • 2389
  • 66 / 8
Как реализовать?
« : 17.10.2017, 09:55:31 »
Доброе утро товарищи.
что то я туплю

есть код:
Код
<!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
не могу понять что дописать в верхний код что бы выводились титл описание и работала ссылка
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

Ragivort

  • Завсегдатай
  • 1154
  • 56 / 2
  • Такая Life
Re: Как реализовать?
« Ответ #1 : 17.10.2017, 13:13:48 »
Цитировать
делаю блок с картинкой в PB
Что такое РВ ?
Что Вы хотите сделать?
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

lexxbry

  • Живу я здесь
  • 2389
  • 66 / 8
Re: Как реализовать?
« Ответ #2 : 17.10.2017, 13:40:50 »
PB - page builder
что хочу сделать
данный код реализует следующее:
есть картинка
при наведении на нее мышкой
всплывает фон с текстом
при клике переход по ссылке

что сделано:
первый код запилен кастом CSS в PB
второй выводится в аддоне HTML
соответственно для каждого изображения приходится прописывать параметры в коде руками(alt, img и ссылку)

что хотелось бы:
в аддоне изображение
вставляем картинку, прописываем ссылку и описание

что получается(аддон-изображение):
картинка выводится
затемнение выводится при наведении, но описание и ссылку не подтягивает с аддона
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как реализовать прокрутку?

Автор lexxbry

Ответов: 4
Просмотров: 1876
Последний ответ 27.10.2017, 11:08:04
от lexxbry
Как реализовать в программном коде меню как на картиинке?

Автор tlokenauake

Ответов: 5
Просмотров: 693
Последний ответ 21.02.2016, 19:18:03
от dmitry_stas
Как такое реализовать?

Автор doowit

Ответов: 5
Просмотров: 694
Последний ответ 10.01.2016, 15:38:39
от Shustry
Как лучше реализовать выделение объекта в JA Image Hotspot?

Автор deminevgen

Ответов: 0
Просмотров: 1353
Последний ответ 28.05.2015, 16:41:41
от deminevgen
Можно ли реализовать звук щелчков кнопок на сайте?

Автор SalityGEN

Ответов: 1
Просмотров: 1776
Последний ответ 17.02.2013, 06:38:16
от art-apple