页面代码结构
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩层</title>
<link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui cards">
<div class="ui card">
<div class="image">
<img src="imgs/lyl.jpg">
</div>
<div class="content">
<a rel="nofollow" href="#" class="header">梁云亮</a>
<div class="meta">资深讲师</div>
<div class="description">
笨鸟先飞，才能有虫吃
</div>
</div>
<div class="extra content">
<span class="left floated">
<i class="like icon"></i>喜欢
</span>
<span class="right floated">
<i class="user icon"></i>好友
</span>
</div>
</div>
<div class="ui card">
<div class="image">
<img src="imgs/lyl.jpg">
</div>
<div class="content">
<a rel="nofollow" href="#" class="header">梁云亮</a>
<div class="meta">资深讲师</div>
<div class="description">
笨鸟先飞，才能有虫吃
</div>
</div>
<div class="extra content">
<span class="left floated">
<i class="like icon"></i>喜欢
</span>
<span class="right floated">
<i class="user icon"></i>好友
</span>
</div>
<div class="ui inverted dimmer">
<div class="ui loader"></div>
</div>
</div>
<div class="ui card">
<div class="image">
<img src="imgs/lyl.jpg">
</div>
<div class="content">
<a rel="nofollow" href="#" class="header">梁云亮</a>
<div class="meta">资深讲师</div>
<div class="description">
笨鸟先飞，才能有虫吃
</div>
</div>
<div class="extra content">
<span class="left floated">
<i class="like icon"></i>喜欢
</span>
<span class="right floated">
<i class="user icon"></i>好友
</span>
</div>
<div class="ui dimmer">
<div class="content">
<h2 class="ui inverted icon header">
<i class="teal heart icon"></i>喜欢
</h2>
</div>
</div>
</div>
</div>
</div>
<script>
// $(".ui.card").dimmer("show");
$('.ui.card').dimmer({
on:"hover", //触发动作，默认click
transition:"fade" //过渡到dimmer时的效果，取值：drop/vertical flip/fade
})
</script>
</body>
</html>
效果：
