图片悬停弹出文字效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - THUMBNAIL HOVER EFFECTS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900); .grid-wrap { padding: 1%; } .list-block { float: left; margin: 1%; width: 31.33333%; font-size: 0; overflow: hidden; } .list-block figure { position: relative; display: block; color: black; text-align: center; } .list-block figure:after { background: #fff; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; content: ''; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; -webkit-transform: skew(-45deg) scaleX(0); -ms-transform: skew(-45deg) scaleX(0); transform: skew(-45deg) scaleX(0); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .list-block figure:hover:after { -webkit-transform: skew(-45deg) scaleX(1); -ms-transform: skew(-45deg) scaleX(1); transform: skew(-45deg) scaleX(1); -moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .list-block figure:hover figcaption h2, .lis.........完整代码请登录后点击上方下载按钮下载查看
网友评论0