要增加網頁的吸引力,在圖片上加入一些互動的訊息 ,最常用到的屬性就是hover這功能。簡單來說,hover是在控制當滑鼠移至某元件時,某元件該如何反應。
用HTML5先設置一張圖片及hover的背景及文字 :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="image-style-one"> <!-- Image --> <img class="img-responsive" src="media/image3.jpg" alt="sample image" /> <!-- image hover style for image #1 --> <div class="image-hover"> <!-- Image Caption --> <div class="image-caption"> <!-- Paragraph --> <p>Suitable for Webpage Design</p> <a href="#" ><i class="fa fa-search"></i></a> </div> </div> </div> |
要産生hover的效果,需要使用以下的技巧和css屬性:
技巧一
使用position的屬性把圖片和hover背景及文字重疊 :
1 2 3 4 5 6 7 8 | .image-style-one { position: relative; } .image-style-one .image-hover { position: absolute; top: 0; left: 0; } |
技巧二
使用opacity的屬性把hover背景及文字在網頁中隱藏 :
1 2 3 | .image-style-one .image-hover { opacity: 0; } |
技巧三
使用:hover的語法,當滑鼠移至圖片時,hover背景及文字便會顯現出來:
1 2 3 | .image-style-one:hover .image-hover { opacity: 1; } |
技巧四
使用transform和transition的屬性産生出hover時圖片旋轉的特效 :
1 2 3 4 5 6 | .image-style-one .image-hover { transition: all 0.5s ease; } .image-style-one:hover img{ transform: scale(1.2) rotate(8deg); } |
你把滑鼠移至以下圖片,便會見到hover的效果 :
css style的完整源碼如下 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | .image-style-one { position: relative; overflow: hidden; width:300px; } .image-style-one img { border-radius: 3px; width:100%; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .image-style-one .image-hover { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.7); border-radius: 3px; opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .image-style-one:hover .image-hover { opacity: 1; } .image-style-one:hover img{ -webkit-transform: scale(1.2) rotate(8deg); -moz-transform: scale(1.2) rotate(8deg); -ms-transform: scale(1.2) rotate(8deg); -o-transform: scale(1.2) rotate(8deg); transform: scale(1.2) rotate(8deg); } .image-style-one .image-caption { margin-top: 12%; text-align: center; } .image-style-one .image-caption h4 { color: #fff; margin-bottom:0px; } .image-style-one .image-caption p{ font-size:20px; max-width:75%; margin:0px auto; color:rgba(255,255,255,0.8); line-height:23px; margin-bottom:5px; } .image-style-one .image-caption a{ display:inline-block; width:50px; height:50px; text-align:center; background:#1693A5; color:#fff; border-radius:100%; line-height:50px; } |
Substantially, the post is in reality the greatest on that deserving topic. I concur with your conclusions and will certainly eagerly look forward to your future updates. Saying thanks definitely will not simply be adequate, for the exceptional clarity in your writing. I can without delay grab your rss feed to stay abreast of any kind of updates. Pleasant work and much success in your business dealings!
on Everyone loves what you guys are up too. This type of clever work and coverage! Keep up the very good works guys I’ve added you guys to my blogroll.