Справка по вводу кода Squarespace - эффекты наведения плоского шаблона - PullRequest
Новая
       11

Справка по вводу кода Squarespace - эффекты наведения плоского шаблона

0 голосов
/ 04 мая 2018

В индексной галерее шаблон Flat-iron позволяет изменять непрозрачность при наведении курсора, но мне интересно, могу ли я изменить ее, т. Е. Сделать так, чтобы изображения сохраняли низкую непрозрачность до тех пор, пока вы не наведете указатель мыши, чтобы показать истинное образ. (т. Е. Как сделать так, чтобы миниатюры выглядели как наложение темного цвета до тех пор, пока вы не наведите курсор мыши, чтобы показать истинное изображение)

Я хочу убедиться, что при вставке кода он не отменяет другие эффекты наведения, имеющиеся в шаблоне, такие как масштабирование изображения, наложение текста и постепенное исчезновение изображения. __ Мне также интересно, какой вариант 2 (если это более простое решение?), Мне интересно, возможно ли, чтобы изображения выглядели черно-белыми до тех пор, пока вы не наведете курсор на цвета).

Извините, я знаю, что в одном посте есть два вопроса. Тем не менее, спасибо за вашу помощь !! Серьезно ценю это!

1 Ответ

0 голосов
/ 04 мая 2018

Вы можете использовать CSS, чтобы сделать любой из них, хотя я не могу говорить о том, что происходит с другими эффектами в шаблоне. Лучший способ выяснить это - проверить CSS на предмет того, с чем вы работаете, и посмотреть, что там есть.

Свойство CSS filter позволяет изменять уровень оттенков серого изображения. Итак, вы можете сделать это: 

img {
    -webkit-filter: grayscale(100%); /*Chrome*/
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: grayscale(0%); /*Chrome*/
    filter: grayscale(0%);
}

Это (конечно) не работает в различных браузерах Microsoft, включая Edge 12.

С непрозрачностью вы делаете то же самое: 

img {
    opacity: .8;
}

img:hover {
    opacity: 0;
}

Теперь вам нужно быть немного осторожнее, если у вас есть несколько сгенерированных темами эффектов, особенно при использовании прозрачности. Например, если у вас есть наложение текста на изображение (как вы, вероятно, делаете), то уменьшение непрозрачности изображения может также уменьшить непрозрачность наложения текста, в зависимости от того, как он построен в HTML. (Если, например, вы установили непрозрачность div, каждый элемент в его контейнере будет наследовать настройку.) Если у вас есть проблемы с непрозрачностью, альтернативой является установка непрозрачности в filter, так же, как вы устанавливали бы шкалу серого.

Для получения дополнительной информации о свойстве filter (которое позволит вам выполнять всевозможные трюки с изображениями), посмотрите this . В частности, посмотрите на яркость. Вот что я хотел бы использовать в первую очередь вместо непрозрачности или оттенков серого: установите яркость, скажем, 0,9, и измените ее на полную при наведении.

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

Для этого взгляните на CSS transition свойство здесь .

...