<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS图文消息的鼠标悬停特效</title>
/*引入字体图标*/ <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link type="text/css" rel="stylesheet" href="css/style.css"> </head> <body> <h1 class="title">纯CSS图文消息的鼠标悬停特效</h1> <article class="card"> <header class="card__thumb"> <a href="#"><img src="images/cover.jpg" /></a> </header> <date class="card__date"> <span class="card__date__day">7</span> <br/> <span class="card__date__month">7月</span> </date> <div class="card__body"> <div class="card__category"> <a href="#">相册</a> </div> <h2 class="card__title"><a href="#">纯CSS的鼠标悬停特效</a></h2> <div class="card__subtitle">个性化你的图文消息!</div> <div class="card__description"> <p>鼠标悬停时自动显示下面说明文字,同时上面的图片有一个缩放的效果。</p> <p>支持多个文本段落的说明,当然字数也不能放太多哦。</p> </div> </div> <footer class="card__footer"> <span class="icon ion-clock"></span> 8 分钟前 <span class="icon ion-chatbox"></span> <a href="#"> 888 条评论</a> </footer> </article> </body> </html>
/*style.css部分*/
/** * VARIABLES **/ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); * { box-sizing: border-box; } body { font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size: 16px; background-color: #eee; } /** * Title **/ .title { text-align: center; -webkit-transform: translateY(20px); transform: translateY(20px); font-size: 30px; font-weight: 500; color: coral; text-transform: uppercase; } /** * CARD **/ .card { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); width: 370px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); overflow: hidden; -webkit-transition: box-shadow 0.5s; transition: box-shadow 0.5s; } .card a { color: inherit; text-decoration: none; } .card:hover { box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); } /** * DATE **/ .card__date { position: absolute; top: 20px; right: 20px; width: 45px; height: 45px; padding-top: 10px; background-color: coral; border-radius: 50%; color: #fff; text-align: center; font-weight: 700; line-height: 13px; } .card__date__day { font-size: 14px; } .card__date__month { text-transform: uppercase; font-size: 10px; } /** * THUMB **/ .card__thumb { height: 245px; overflow: hidden; background-color: #000; -webkit-transition: height 0.5s; transition: height 0.5s; } .card__thumb img { display: block; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; } .card:hover .card__thumb { height: 130px; } .card:hover .card__thumb img { opacity: 0.6; -webkit-transform: scale(1.2); transform: scale(1.2); } /** * BODY **/ .card__body { position: relative; height: 185px; padding: 20px; -webkit-transition: height 0.5s; transition: height 0.5s; } .card:hover .card__body { height: 300px; } .card__category { position: absolute; top: -25px; left: 0; height: 25px; padding: 0 15px; background-color: coral; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 25px; } .card__title { margin: 0; padding: 0 0 10px 0; color: #000; font-size: 22px; font-weight: 500; text-transform: uppercase; } .card__subtitle { margin: 0; padding: 0 0 10px 0; font-size: 19px; color: coral; } .card__description { text-align: justify; text-indent: 2em; position: absolute; left: 20px; right: 20px; /*bottom: 56px;*/ margin: 0; padding: 0; color: #666C74; line-height: 27px; opacity: 0; -webkit-transform: translateY(45px); transform: translateY(45px); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; -webkit-transition-delay: 0s; transition-delay: 0s; } .card__description p { margin: 0; } .card:hover .card__description { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .card__footer { position: absolute; bottom: 12px; left: 20px; right: 20px; font-size: 11px; color: #A3A9A2; } .icon { display: inline-block; vertical-align: middle; margin: -2px 0 0 2px; font-size: 18px; } .icon + .icon { padding-left: 10px; }