код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Peoples - социальная сеть</title>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="ui vertical inverted sidebar menu">
<a class="item" href="http://peoples.peshkova-natalia.ru">Дом</a>
<a class="item" href="http://peoples.peshkova-natalia.ru/scanner">Сканнер</a>
<a class="item" href="#">Баланс</a>
<a class="item" href="http://peoples.peshkova-natalia.ru/settings">Настройки</a>
<a class="item" href="#">Уведомления</a>
<a class="item" href="#">Справка</a>
<a class="item" href="http://peoples.peshkova-natalia.ru/logout">Выход</a>
<hr>
<a class="item" href="#">Общение</a>
<a class="item" href="#">Лента</a>
<a class="item" href="#">Контент</a>
<a class="item" href="#">Люди</a>
<a class="item" href="#">Чаты</a>
<a class="item" href="#">Форумы</a>
<a class="item" href="#">Вопросы</a>
<a class="item" href="#">Объявления</a>
<a class="item" href="#">Блоги</a>
<a class="item" href="#">Файлы</a>
<a class="item" href="#">Товары</a>
<a class="item" href="#">Источники</a>
</div>
<div class="pusher">
<div style="margin-bottom:30px;" class="ui vertical teal inverted center aligned segment">
<div class="ui container">
<div class="ui large secondary inverted menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
<h3 class="toc item">PEOPLES - социальная сеть.</h3>
<div class="item right floated"><button class="ui button">^НАВЕРХ</button></div>
</div>
</div>
</div>
<div class="ui stackable centered grid">
<div class="ui special cards">
<div style="margin-left:10px;" class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button like_button">Лайкнуть</div>
</div>
</div>
</div>
<img src="/storage/avatars/avatar.png">
</div>
<div class="content">
<div class="header">Виктор Насонов</div>
<div class="meta">
kvonosan
</div>
</div>
<div class="extra content">
<a><i class="users icon"></i>0 Лайков</a>
</div>
</div>
<div class="column eight">
<div style="margin-bottom:40px;margin-left:10px;" class="card">
<h2 class="content">Репутация</h2>
<div class="ui five doubling cards">
<div class="card">
<div class="image">
<img src="/images/kot.jpg">
</div>
<div class="content">
<div class="header">Котан</div>
<div class="meta">
крутой!
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
0
</a>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/enot.jpg">
</div>
<div class="content">
<div class="header">Енот</div>
<div class="meta">
хитрый
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
0
</a>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/lisa.jpg">
</div>
<div class="content">
<div class="header">Лисица</div>
<div class="meta">
умная
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
0
</a>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/tylen.jpg">
</div>
<div class="content">
<div class="header">Тюлень</div>
<div class="meta">
тупой
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
0
</a>
</div>
</div>
<div class="card">
<div class="image">
<img src="/images/osel.jpg">
</div>
<div class="content">
<div class="header">Осел</div>
<div class="meta">
упрямый
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
0
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/js/app.js"></script>
<script>
$('.special.cards .image').first().dimmer({
on: 'hover'
})
$('.like_button').on('click', function(){
$.ajax({
headers: { 'X-CSRF-TOKEN': '4CwGSPWUp7R6labEmeoYZFJbgxyGvFuTyxJSR9D6' },
type: 'POST',
url: '/like',
data: {id:1, type:'user'},
success: function(data) {
alert( "Data Loaded: " + data );
}
});
});
</script>
</body>
</html>
Как сделать dimmer как на
<img src="/storage/avatars/avatar.png"> на картинку
<div class="card">
<div class="image">
<img src="/images/kot.jpg">
</div>
Простой
