var toggleSwitch = $('[data-theme="toggle"]');
// Получение значения куки
var currentTheme = Cookies.get('theme');
// Если значение undefined (т.е. пользователь первый раз на сайте или не выбрал явно тему)
if (typeof (currentTheme) === 'undefined') {
// Проверяем тему ос, если она темная, то дописываем значение dark
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
Cookies.set('theme', 'dark');
// Присваиваем значение переменной - dark
currentTheme = 'dark';
}
}
if (currentTheme === 'dark') {
$('html').attr('data-theme', currentTheme);
toggleSwitch.attr('checked', 'checked');
}div {
float:left;
width:33.3%
}
div.first,
div.last {
padding:200px 0 0
}
@media screen and (max-width: 960px) {
div {
paddint:0;
float:none;
width:auto;
}}<div class="image">
<img src="http://i57.tinypic.com/3bl8n.png" alt="" />
<a href="#"></a>
</div>.image a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url('http://i62.tinypic.com/4jvwk7.png') no-repeat center / 53%;
opacity: 0;
z-index: 5;
}
.image:hover img {
opacity: 0.2;
}
.image:hover a {
opacity: 1;
}