效果展示
完整代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html5鼠标悬停图文消息滑动切换特效-前端元素eleui.cn</title><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">8</span><br/><span class="card__date__month">8月</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> 38 分钟前<span class="icon ion-chatbox"></span><a href="#"> 88 条评论</a></footer></article><style>@import url(https://fonts.googleapis.com/css" />);* {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;}</style></body></html>