Как привязать css к уже готовому решению?

Question

[Александр]

Есть сайт weblium.com , начал его изучать.В нем есть готовые шаблоны их можно изменять под себя, ну или же конструировать с нуля сайт.Суть в том что есть блоки , один из них называется embed code(произвольный код )

embed code

в нем можно писать свой код и применять к другим блокам.
Суть моей задачи заключается К блоку Collections

блок Collections

по наведению на каждую карточку реализовать появление border в 6px и scale background картинки и затемнение overlay для лучшей читаемости текста. Я не понимаю как мне привязать свой код к определенному блоку, прошу помощи . Кто в этом разбирается, зарегатся 1 минута, выбрать любой шаблон и протестите, пожалуйста

Вот что люди по коду накидали, на сколько верно проверить не могу(

:root {
  --bg-scale-1: 110%;
}
.card:hover {
  border: 6px solid #000;
  background-size: var(--bg-scale-1); // google it as CSS Variables
}

Comments

[Rustam Bainazarov]

Зачем нам это делать? Сами пробуйте.

Учите селекторы CSS — и вперёд, раз там есть возможность применить свой код.

[Александр]

Рустам Байназаров, не знаю, может быть кому тоже интересно будет)Мне хотя б понять как привязывать, вчера сидел голову ломал, как правильно сделать , так и не понял.Мне не ловко такое было задавать, но раз есть люди понимающие , стоит спросить