基于CSS3图片悬停放大特效_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:28
Original
1053 Leute haben es durchsucht

今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果。配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的展示。

在线预览   源码下载

实现的代码。

html代码:

  <div id="image-container">            <div class="img" id="img-1">                <div class="mask">                </div>                <img  src="images/01.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="img" id="img-2">                <div class="mask">                </div>                <img  src="images/07.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="img" id="img-3">                <div class="mask" id="mask-1">                </div>                <div class="mask" id="mask-2">                </div>                <img  src="images/05.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="img" id="img-4">                <div class="mask">                </div>                <img  src="images/04.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="img" id="img-5">                <div class="mask">                </div>                <img  src="images/06.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="img" id="img-6">                <div class="mask">                </div>                <img  src="images/08.jpg" alt="基于CSS3图片悬停放大特效_html/css_WEB-ITnose" >            </div>            <div class="clearfix">            </div>        </div>        <div class="clearfix">        </div>        <br>        <div id="warning"   style="max-width:90%">        </div>
Nach dem Login kopieren

via:   http://www.w2bc.com/Article/29682

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage