<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3鼠标滑过图片效果</title> <!--响应式框架--> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /> <!--图标库--> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <!--主要样式--> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <div style="height:60px;"></div> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-1.jpg"> <div class="box-content"> <h3 class="title">Williamson</h3> <span class="post">网页设计</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/img-1.jpg"> <div class="box-content"> <h3 class="title">Miranda Roy</h3> <span class="post">前端开发</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box"> <img class="img-clip image-clip-5" src="images/img-1.jpg"> <div class="box-content"> <h3 class="title">Steve Thomas</h3> <span class="post">网站建设</span> </div> <ul class="icon"> <li><a href="#"><i class="fa fa-search"></i></a></li> <li><a href="#"><i class="fa fa-link"></i></a></li> </ul> </div> </div> </div> </div> </body> </html>
CSS3鼠标滑过图片效果
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
js输入框弹出日历时间插件
下一篇:
纯CSS3骏马奔腾动画特效