Всем привет!
Возник такой вопрос, как вставить {$item.field_overlay} в css.

Поясню зачем. На  Главной сайта выводится блок "Горячей новости".

<div class="hotnews" style="background-image: url('{$item.field_image}');">
    <div class="hn_overlay" style="background-image: url('{$item.field_overlay}');"></div>
    <span class="hn_date">{locale_date("d F ", $item.publish_date)}</span>
    {foreach page_tags($item.id) as $tag} 
    <span class="hn_filters"><a href="{site_url('tags/search/'.$tag.value)}">{$tag.value}</a> 
    {/foreach}
    / <a href="/{$item.cat_url}">Федеральные практики</a></span>
    <p class="hn_head"><a href="{site_url($item.full_url)}">{$item.title}</a></p>
</div>

В блоке есть фотка новости ({$item.field_image}) и накладываемый сверху полупрозрачный png ({$item.field_overlay}). Значения изображения и оверлея задаются через доп.поля, при создании страницы (новости). Все работает
Сейчас, как видно, оба значения прописаны в атрибутах тега. Но мне нужно добавить hover-варинат, при котором, оверлей пропадает при наведении.

Вижу два варианта.
1. Прописать {$item.field_overlay} в файле css. Но тогда я неуверен, что в файле подхватится это значение (скорее даже уверен, что неподхватится).
2.  Вывести нужный класс в из файл в код с помощью <style></style>. Но вроде бы CSS обрамляется {literal} {/literal}, значит  {$item.field_overlay} тоже не подхватится.

Вот и вопросы. Правильно ли я понимаю по первому и второму пункту, что не заработает? И если правильно, то как быть?