@dooy
2017-09-28T02:33:36.000000Z
字数 2229
阅读 145
JS
<html><head><meta charset="utf-8"><title>hover</title><style type="text/css">body{margin:0 auto;}ul,li{margin:0; padding: 0; list-style: none;}.hover-w{background: #373d41 none repeat scroll 0 0;}.hover-w ul{margin: 0 auto; width:1000px; }.hover-w ul::after, .hover-w ul::before{ clear:both; content: " "; display: table }.hover-w ul li{float: left; width: 25%; height: 330px; background-color: #fff; position: relative;cursor: pointer; }.hover-w ul li img{width: 100%; height: 100%; }.hover-w ul li .bg{bottom: 0;left: 0;opacity: 0.6;position: absolute;right: 0; top: 0; background: #161a1d none repeat scroll 0 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; }.hover-w ul li .bg.bg-black{ opacity: 0.84; }.hover-w ul li a{ cursor: pointer; display: block;}.hover-w ul li .h-content{ position: absolute; bottom: 0;left: 0; right: 0px; top:100px; text-align: center;color: #fff; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;}.hover-w ul li .h-content .h-content-title{ font-size: 30px; font-family: "微软雅黑" ; margin-bottom: 10px; }.hover-w ul li .h-content .h-content-padding{ margin:20px 20px 0 20px; opacity: 0; }.hover-w ul li:hover .h-content{ top:40px; }.hover-w ul li:hover .h-content .h-content-padding{ opacity: 1; }.hover-w ul li:hover .bg{ background: #00c2de none repeat scroll 0 0; opacity: 0.9; }</style></head><body><br><br><div class="hover-w"><ul ><li><a href=""><img src="//img.alicdn.com/tps/TB16hkwLXXXXXX6XXXXXXXXXXXX-576-840.jpg"></a><div class="bg"></div><div class="h-content"><div class="h-content-title">作文</div><div class="h-content-padding">批改网基于语料库和云计算技术提供英语作文自动在线批改服务</div></div></li><li><a href=""><img src="//img1.doubanio.com/lpic/s29474827.jpg"></a><div class="bg bg-black"></div><div class="h-content"><div class="h-content-title">作文2</div><div class="h-content-padding">批改网2基于语料库和云计算技术提供英语作文自动在线批改服务</div></div></li><li><a href=""><img src="//img1.doubanio.com/lpic/s29474829.jpg"></a><div class="bg"></div><div class="h-content"><div class="h-content-title">作文3</div><div class="h-content-padding">批改网基于语料库和云计算技术提供英语作文自动在线批改服务</div></div></li><li><a href=""><img src="//img1.doubanio.com/lpic/s29474828.jpg"></a><div class="bg bg-black"></div><div class="h-content"><div class="h-content-title">作文4</div><div class="h-content-padding">批改网2基于语料库和云计算技术提供英语作文自动在线批改服务</div></div></li></ul></div></div></body></html>