CSS简易图文卡片

来源:https://www.sucaihuo.com/js/2850.html 2017-08-28 01:08浏览(2914) 收藏

一款CSS简易图文卡片代码,鼠标悬停在图片上面时,会有提示的文字遮罩图片,点击加号的按钮,可以打开详细的说明内容。
CSS简易图文卡片
分类:html/css > 图形 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2