jquery+css实现图片相册点击聚焦显示更多文字内容效果代码
代码语言:html
所属分类:画廊相册
代码描述:jquery+css实现图片相册点击聚焦显示更多文字内容效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background:#dce1df; color:#4f585e; font-family:'Source Sans Pro',sans-serif; } a.btn { background:#0096a0; border-radius:4px; box-shadow:0 2px 0 0 rgba(0,0,0,0.25); color:#fff; display:inline-block; padding:6px 30px 8px; position:relative; text-decoration:none; transition:all .1s 0s ease-out } .no-touch a.btn:hover { background:#00a2ad; box-shadow:0 8px 2px 0 rgba(0,0,0,0.075); transform:translateY(-2px); transition:all .25s 0s ease-out } .no-touch a.btn:active,a.btn:active { background:#008a93; box-shadow:0 1px 0 0 rgba(255,255,255,0.25); transform:translate3d(0,1px,0); transition:all .025s 0s ease-out } div.cards { margin:80px auto; max-width:960px; text-align:center } div.card { background:#fff; display:inline-block; margin:8px; max-width:300px; perspective:1000; position:relative; text-align:left; transition:all .3s 0s ease-in; width:300px; z-index:1 } div.card img { max-width:300px } div.card .card__image-holder { background:rgba(0,0,0,0.1); height:0; padding-bottom:75% } div.card div.card-title { background:#fff; padding:6px 15px 10px; position:relative; z-index:0 } div.card div.card-title a.toggle-info { border-radius:32px; height:32px; padding:0; position:absolute; right:15px; top:10px; width:32px } div.card div.card-title a.toggle-info span { background:#fff; display:block; height:2px; position:absolute; top:16px; transition:all .15s 0s ease-out; width:12px } div.card div.card-title a.toggle-info span.left { right:14px; transform:rotate(45deg) } div.card div.card-title a.toggle-info span.right { left:14px; transform:rotate(-45deg) } div.card div.card-title h2 { font-size:24px; font-weight:700; letter-spacing:-0.05em; margin:0; padding:0 } div.card div.card-title h2 small { display:block; font-size:18px; font-weight:600; letter-spacing:-0.025em } div.card div.card-description { padding:0 15px 10px; position:relative; font-size:14px } div.card div.card-actions { box-shadow:0 2px 0 0 rgba(0,0,0,0.075); padding:10px 15px 20px; text-align:center } div.card div.card-flap { background:#d9d9d9; position:absolute; width:100%; transform-origin:top; transform:rotateX(-90deg) } div.card div.flap1 { transition:all .3s .3s ease-out; z-index:-1 } div.card div.flap2 { transition:all .3s 0s ease-out; z-index:-2 } div.cards.showing div.card { cursor:pointer; opacity:.6; transform:scale(0.88) } .no-touch div.cards.showing div.card:hover { opacity:.94; transform:scale(0.92) } div.card.show { opacity:1!important; transform:scale(1)!important } div.card.show div.card-title a.toggle-info { background:#f66!important } div.card.show div.card-title a.toggle-info span { top:15px } div.card.show div.card-title a.toggle-info span.left { right:10px } div.card.show div.card-title a.toggle-info span.right { left:10px } div.card.show div.card-flap { background:#fff; transform:rotateX(0deg) } div.card.show div.flap1 { transition:all .3s 0s ease-out } div.card.show div.flap2 { transition:all .3s .2s ease-out } </style> </head> <body> <div class="cards"> <div class="card"> <div class="card__image-holder"><img class="card__image" src="//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_255,/quality,q_90" alt="wave" /></div> <div class="card-title"><a href="#" class="toggle-info btn"><span class="left"></span><span class="right"></span></a> <h2>Card title <small>Image from unsplash.com</small></h2> </div> <div class="card-flap flap1"> <div class="card-description">This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc. </div> <div class="card-flap flap2"> <div class="card-actions"> <a href="#" class="btn">Read more</a> </div> </div> </div> </div> <div class="card"> <div class="card__image-holder"> <img class="card__image" src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_255,/quality,q_90" alt="beach" /> </div> <div class="card-title"> <a href="#" class="toggle-info btn"> <span class="left"></span> <span class="right"></span> </a> <h2> Card title <small>Image from unsplash.com</small> </h2> </div> <div class="card-flap flap1"> <div class="card-description"> This grid is an attempt to make something nice that works on touch devices. Ignoring hover states when they're not available etc. </div> <div class="card-flap flap2"> <div class="card-actions"><a href="#" class="btn">Read more</a></div> </div> </div> </div> <div class="card"> <div class="card_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0