一款CSS简易图文卡片代码,鼠标悬停在图片上面时,会有提示的文字遮罩图片,点击加号的按钮,可以打开详细的说明内容。
页面的head部分,需引入两个CSS样式文件,代码如下:
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,需设置好卡片元素的div容器的,代码如下:
<div class="row">
<div class="small-7 medium-5 large-4 column end small-centered card">
<div class="card-top"><a href="#0">
<div class="overlay">
<h1>查看</h1>
</div></a><img class="card-img" src="images/yeti.png"/></div>
<div class="triangle">
<div class="circle-button" id="circleDrop"><img class="close" src="images/close.svg"/></div>
</div>
<div class="card-middle">
<h5 class="more">你所拥有的一切,都是你吸引而来的。我们都活在过去的行为和想法创造的世界了。</h5>
</div>
<div class="card-bottom text-center">
<h2 class="card-title">吸引力法则</h2>
</div>
</div>
</div>
页面的底部,需引入jQuery库和必要的JS文件,代码如下:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791