<div class="image" style="background-image: url(https://i.ytimg.com/vi/E0hnI4_egl8/maxresdefault.jpg)">
<a href="#">
<span>Читать новость</span>
</a>
</div>.image {
width: 200px;
height: 150px;
background-size: cover;
display: flex;
}
.image a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
heigh: 100%;
background-color: rgba(0, 0, 0, 0.8);
transition: ease all .2s;
opacity: 0;
visibility: hidden;
}
.image:hover a {
opacity: 1;
visibility: visible;
}const desktopWidth = 992; // минимальный размер десктопной версии
window.addEventListener('resize', () => {
if (window.innerWidth < desktopWidth) {
const blocks = document.querySelectorAll('.collapse'); // находим все блоки с нужным классом. к классу collapse нужных блоков лучше все же добавить еще какой-то класс для того, чтобы идентифицировать именно эти блоки. и вписать новый класс сюда вместо .collapse; мало ли еще где-то будут использоваться блоки сворачивающиеся, где нужно будет их логику сохранить по дефолту.
for (let i = 0; i < blocks.length; i++) {
if (blocks[i].classList.contains('show')) { // проверяем, добавлен ли класс show на текущий момент
blocks[i].classList.remove('show'); // удаляем show
}
}
}
});position: relative;position: sticky;
top: 0;<? if($_POST): $error = 'Такой емэйл уже зарегистрирован' . filter_input(INPUT_POST, 'reg_email'); ?>
<div id="error_message" style="width:200px; color:red; position:fixed; left:50%; margin-left:-100px; text-align:center;">
<?= $error ?>
</div>
<? endif ?>
<form>
<!-- код формы -->
</form><div class="changeable">
<div id="block-1" class="block visible">Первый</div>
<div id="block-2" class="block">Второй</div>
</div>div.block {
display: none;
}
div.block.visible {
display: block;
}$('.block').on('click', function(){
$(this).closest('.changeable').find('.block').toggleClass('visible');
});