Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как изменить положение текста при наведении на постер?

Как изменить положение текста при наведении на постер?


     04.05.2020    dle 13.2, постер    Общие вопросы по вёрстке, Стили (CSS)    141

вопрос
Приветствую! Есть сайт http://myltikpyltik.online/, на постерах в популярном наложена плашка с названием мульта, при наведении она пропадает. Собственно вопрос: как сделать наоборот, чтоб при наведении появлялась? И где это делать? Я сколько не смотрела в коде, ровным счетом ничего не меняется. Заранее благодарю откликнувшихся)

Ответил: леший


Цитата: Anna2020

И где это делать?

В файле /templates/myltik3/css/styles.css
Цитата: Anna2020

как сделать наоборот, чтоб при наведении появлялась?

в коде

.popular-item-img:before {content: ''; position: absolute; z-index: 5;  left: 0; right: 0; bottom: 0; height: 70%; 
	background: linear-gradient(to bottom, transparent 0%,#000000 100%); opacity: 1;}
.popular-item:hover .popular-item-img:before, .popular-item:hover .popular-item-title {opacity: 0;}

замените значения свойства opacity (ноль и единицу поменяйте местами)

.popular-item-img:before {content: ''; position: absolute; z-index: 5;  left: 0; right: 0; bottom: 0; height: 70%; 
    background: linear-gradient(to bottom, transparent 0%,#000000 100%); opacity: 0;}
.popular-item:hover .popular-item-img:before, .popular-item:hover .popular-item-title {opacity: 1;}

5 комментариев

леший
Эксперт

леший - 4 мая 2020 10:42 -

***Комментарий удален***

Anna2020
Юзер

Anna2020 - 4 мая 2020 10:59 -

Спасибо. Позже испытаю)

Anna2020
Юзер

Anna2020 - 4 мая 2020 16:42 -

От спасибище!!!!! Получилось) Единственное, мини добавление от меня) Я еще строчкой выше дописала opacity: 0 возле описания, чтоб и сама плашка и текст появлялись при наведении, а то без opacity: 0 у текста, текст закреплен, а плашка появляется)
Еще раз огромное спасибо, я бы не догадалась))))

леший
Эксперт

леший - 4 мая 2020 16:46 -

Цитата: Anna2020
а то без opacity: 0 у текста, текст закреплен, а плашка появляется)

упустил этот момент, приношу свои извинения))))

Anna2020
Юзер

Anna2020 - 4 мая 2020 16:49 -

После комментария я поняла что отвечает за наведение и по логике догадалась что надо сделать) Пальцем в небо, и получилось) У меня половина дизайна сделана пальцем в небо))))

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх