Jump to content
  • 0
Sign in to follow this  
alexnew

Подложка при наведении курсора на объект

Question

alexnew    0

Ребята всем привет!
Очень простой вопрос, но у меня возник тупик.
Как сделать вот такую анимацию стандартными средствами Muse?
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке

У меня получилось сделать это с помощью стандартного лайтбокса, но дело в том, что только при выбранном эффекте (переходе) Затухание, градиентная подложка пропадает когда убираешь курсор с объекта. 
А вот при выборе перехода по Вертикали (что и требуется) - градиентная подложка появляется снизу вверх и остается на изображении, даже когда убираешь курсор с объекта.

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
13 часов назад, alexnew сказал:

Очень простой вопрос, но у меня возник тупик

Это не такой простой вопрос как вам кажется. Использование для этих целей виджета композиция - то же самое, что зажигать светодиод с помощью атомной станции. 4-5 таких объектов на странице и она станет похожа на это:

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=https://cs8.pikabu.ru/post_img/2017/09/28/8/150660718112865074.jpg&key=0b1378226f1f43857d356d2873870a2240a0665311a51fdb06c46efb0b48a0a7" width="321" />

Использование огромного скрипта ради эффекта, работающего на чистом css - сверх неоправданно. Ну и как вы сами поняли, того, что нужно добиться не возможно. И никакими стандартными инструментами не возможно.

Здесь потребуется писать css код. Для реализации используется кнопка состояния залитая изображением.
Код с использованием псевдоэлемента before (css селекторы у вас могут отличаться):
 

<style>
#buttonu97 {
	overflow: hidden; /*Скрываем скроллбары и контент который вылезает за пределы кнопки*/
}
/*Стилизуем псевдо элемент before, который будет появляться при наведении*/
#buttonu97::before {
	content: "ТЕКСТ";
	position: absolute;
	top: 291px; /*Отступ сверху в стандартном состоянии равен высоте кнопки*/
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	padding-top: 100px;
    font-size: 24px;
    transition: all .5s ease-in-out;
}
  /*Устанавливаем отступ сверху для псевдо элемента при наведенном курсоре*/
#buttonu97:hover::before {
	top: 50px;
}
</style>

Результат:
ee2f341821.gif

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

Второй вариант с использование простого текстового фрейма.
Сначала настраиваем фрейм средствами музы - размер, заливку, положение текста.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Дальше код. Кода немного больше.

<style>
#u118-6 {
	overflow: hidden; /*Скрываем скроллбары и контент который вылезает за пределы кнопки*/
}
/*Стилизуем псевдо элемент before, который будет появляться при наведении*/
#u118-6::before {
	content: "";
	position: absolute;
	top: 344px; /*Отступ сверху в стандартном состоянии равен высоте кнопки*/
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	transition: all .5s ease-in-out;
	z-index: -1;
}
#u118-6:hover::before {
	top: 50px; /*Устанавливаем отступ сверху для псевдо элемента при наведенном курсоре*/
}
/*Задаем положение текста в начальном состоянии*/
#u118-6 p {
	margin-top: 89px;
	position: absolute;
	transition: all 1s ease-in-out;
}
/*Задаем положение текста при наведении*/
#u118-6:hover p {
	margin-top: 0px;
}
</style>

Результат:
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...