Мастерская: декоративные эффекты на HTML5 и CSS3 / Маска при наведении

Курсы
1

Пробую разобрать тщательно пример на codepen. Помогите пожалуйста.

Взгляните на второй блок ANKER, при наведение шестиугольник уходит слева на право, я хочу чтоб сразу за ним слева направо появился текст. Никак не могу добиться этого эффекта.

2

Если Вы хотите сдвинуть .details - поменяйте немного подход к его скрытию.
Замените display:none; на visibility:hidden.
И display:block, при наведении на .item, на visibility:visible.
А дальше уже экспериментируйте.
Например так:

.item.anker .details {
  transition: all 1s linear;
  left:-100%;
}
.item.anker:hover .details {
  left:0;
}
1 лайк
3

Большое спасибо, за отзывчивость и да, помогло.
Только всё никак не могу найти объяснения почему оно так же само не двигается плавно, если будет прежний способ скрытия.

4

Значение none у свойства display — временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

Когда значение hidden у visibility — делает элемент невидимым, а место, которое элемент занимает, остается за ним.

5

Спасибо. Хотя увы даже зная тоже самое что ответили Вы , я не мог понять почему это действует так в моём случае :slight_smile:

Есть еще трудность, на ту же тему закрепления знаний по декоративным элементам:
Кнопка 3, не могу добиться чтоб текст кнопки был поверх псевдоэлемента, который заполняет кнопку при наведении. z-index вовсе не элементарный элемент.
А также в кнопке2, чтоб длина псевдоэлементов тоже плавно менялась, а то поворот плавный, а длина как дерганая =/

6

Зачем вы в <style> прописали для кнопок absolute? )

7

в style грязь) намешанный код. В этом вся загвоздка?

8

Не. меня просто пугают такие «выравнивания» текста в блоке по центру.
У вас путаница с позиционированием. откуда взяты кнопки? видел уже похожее. не на coddrops случайно? )

будет время — переделаю на нормальный лад. Пока почитайте про z-index и position:absolute, особенно про дочерние элементы

9

Выравнивание :slight_smile: Всё с него и пошло, я начал играться с центрированием, потом перешел к курсу про дек.эл., так и забросив то что есть в центрировании, никак не подружусь с vertical-align:middle, да и с центрированием в целом.
В процессе всего этого и сделал кнопки для закрепления материала. Первый эффект с Вашего урока взял, второй - это видоизмененный Ваш же эффект, третий это уже мой эксперимент, хотя на подобную кнопку однажды наталкивался уже.
На coddrops там кнопки куда по-круче будут, чем то что я настряпал.

Спасибо, надеюсь у Вас будет предостаточно времени. (наивный я походу) :))

10
  1. ul и так ведет себя как display:block, к тому же width:100% для блочного элемента задавать не надо, если это не псевдоэлемент.
  2. Можно обойтись и position:relative, главное z-index указать.
  3. Слишком «сложная структура», переделал на li a span. Т.к. кнопка не являлась как таковой.
  4. title для div был зачем? )
  5. Немного неуниверсально получилось (переделать до конца не смог). Только для кнопок «в одну строчку», но постарался сделать для любой длины.
  6. Логичней использовать :before для левого/верхнего «декора», а :after для правого/нижнего.
  7. и да, там центровка была ну прям дикая )))

Ах и да, вот ссыль.

3 лайка
11

transition: .4s transform ease; - > transition: all .4s ease;

12

Все красиво, всё понятно. Благодарю.
Разметка злая, li a span куда лаконичней. Учеба есть учеба)