Суть:

Чтобы использовать свой css в курсах есть проблема: после публикации не сохраняется ни исходное имя файла, ни имя указанное в таймлане курса. Но есть обходное решение через функционал «accessibility».
Мы присваиваем файлам нужное имя, и оно записывается в data атрибут файла. Этот атрибут не изменяется после публикации. Это позволяет нам дописывать CSS эффекты после публикации курса.
⚠️
Если вы найдете красивое применение этой информации - поделитесь слайдом в чате! Вставим сюда как пример хорошей реализации.

Действия:

  1. Добавляем картинки в курс
  1. Нажимаем ПКМ по картинки и переходим в настройки «accessibility»
      2. notion image
  1. Задаем удобный нам альтернативный тег
      2. notion image
  1. Публикуем курс
  1. Идем по пути: html5>data>css и открываем файл стилей курса «output.min.css»
  1. Спускаемся в конец документа и добавляем один из этих кодов.
 

Код:

Эффект увеличения внутри изображения

[data-acc-text~="ваше имя файла в accessibility.jpg"] div {
overflow: hidden;
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg {
transition: all 2s ease;
transform-origin: center center;
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg:hover {
transform: scale(1.4);
}
Скорость трансформации управляется с помощью transition, а степень увеличения с помощью transform.

Эффект увеличения самого изображения

[data-acc-text~="ваше имя файла в accessibility.jpg"] div {
overflow: visible;
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg {
transition: all 2s ease;
transform-origin: center center;
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg:hover {
transform: scale(1.4);
}
Чтобы эффект работал по щелчку замените ‘svg:hover’ на ‘svg:active’. Но это работает только при щелчке и удержании кнопки мыши. А в сенсорном управлении эффект масштабирования останется пока пользователь не коснется еще чего-то.

Переход из оттенков серого в цвет при наведении курсора

[data-acc-text~="ваше имя файла в accessibility.jpg"] div {
overflow: visible;
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg {
transition: all 2s ease;
transform-origin: center center;
filter: grayscale(80%);
}

[data-acc-text~="ваше имя файла в accessibility.jpg"] svg:hover {
filter:grayscale(0%);
}
 
💡
Если один и тот же эффект нужно указать нескольким изображениям - вы можете указать их все через запятую. [data-acc-text~="картинка 1"] div, [data-acc-text~="картинка 2"] div {
badge