30款css3实现的鼠标经过图片显示描述特效

  • A+
所属分类:DIV+CSS

     今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

30款css3实现的鼠标经过图片显示描述特效

在线预览

30款css3实现的鼠标经过图片显示描述特效.rar

实现的代码。

html代码:

    <div class="container">
            <!-- Top Navigation -->
            <header class="codrops-header">
                    <h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>
                    <nav class="codrops-demos">
                        <a class="current-demo" href="index.html">Set 1</a>
                        <a href="index2.html">Set 2</a>
                    </nav>
                </header>
            <div class="content">
                <h2>
                    Lily</h2>
                <div class="grid">
                    <figure class="effect-lily">
                            <img src="img/12.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img12"/>
                            <figcaption>
                                <div>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </div>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-lily">
                            <img src="img/1.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img1"/>
                            <figcaption>
                                <div>
                                    <h2>Nice <span>Lily</span></h2>
                                    <p>Lily likes to play with crayons and pencils</p>
                                </div>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Sadie</h2>
                <div class="grid">
                    <figure class="effect-sadie">
                            <img src="img/2.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img02"/>
                            <figcaption>
                                <h2>Holy <span>Sadie</span></h2>
                                <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-sadie">
                            <img src="img/14.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img14"/>
                            <figcaption>
                                <h2>Holy <span>Sadie</span></h2>
                                <p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Honey</h2>
                <div class="grid">
                    <figure class="effect-honey">
                            <img src="img/4.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img04"/>
                            <figcaption>
                                <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-honey">
                            <img src="img/5.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img05"/>
                            <figcaption>
                                <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Layla</h2>
                <div class="grid">
                    <figure class="effect-layla">
                            <img src="img/6.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img06"/>
                            <figcaption>
                                <h2>Crazy <span>Layla</span></h2>
                                <p>When Layla appears, she brings an eternal summer along.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-layla">
                            <img src="img/3.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img03"/>
                            <figcaption>
                                <h2>Crazy <span>Layla</span></h2>
                                <p>When Layla appears, she brings an eternal summer along.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Zoe</h2>
                <div class="grid">
                    <figure class="effect-zoe">
                            <img src="img/25.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img25"/>
                            <figcaption>
                                <h2>Creative <span>Zoe</span></h2>
                                <p class="icon-links">
                                    <a href="#"><span class="icon-heart"></span></a>
                                    <a href="#"><span class="icon-eye"></span></a>
                                    <a href="#"><span class="icon-paper-clip"></span></a>
                                </p>
                                <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                            </figcaption>            
                        </figure>
                    <figure class="effect-zoe">
                            <img src="img/26.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img26"/>
                            <figcaption>
                                <h2>Creative <span>Zoe</span></h2>
                                <p class="icon-links">
                                    <a href="#"><span class="icon-heart"></span></a>
                                    <a href="#"><span class="icon-eye"></span></a>
                                    <a href="#"><span class="icon-paper-clip"></span></a>
                                </p>
                                <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Oscar</h2>
                <div class="grid">
                    <figure class="effect-oscar">
                            <img src="img/9.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img09"/>
                            <figcaption>
                                <h2>Warm <span>Oscar</span></h2>
                                <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-oscar">
                            <img src="img/10.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img10"/>
                            <figcaption>
                                <h2>Warm <span>Oscar</span></h2>
                                <p>Oscar is a decent man. He used to clean porches with pleasure.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Marley</h2>
                <div class="grid">
                    <figure class="effect-marley">
                            <img src="img/11.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img11"/>
                            <figcaption>
                                <h2>Sweet <span>Marley</span></h2>
                                <p>Marley tried to convince her but she was not interested.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-marley">
                            <img src="img/12.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img12"/>
                            <figcaption>
                                <h2>Sweet <span>Marley</span></h2>
                                <p>Marley tried to convince her but she was not interested.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Ruby</h2>
                <div class="grid">
                    <figure class="effect-ruby">
                            <img src="img/13.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img13"/>
                            <figcaption>
                                <h2>Glowing <span>Ruby</span></h2>
                                <p>Ruby did not need any help. Everybody knew that.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-ruby">
                            <img src="img/14.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img14"/>
                            <figcaption>
                                <h2>Glowing <span>Ruby</span></h2>
                                <p>Ruby did not need any help. Everybody knew that.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Roxy</h2>
                <div class="grid">
                    <figure class="effect-roxy">
                            <img src="img/15.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img15"/>
                            <figcaption>
                                <h2>Charming <span>Roxy</span></h2>
                                <p>Roxy was my best friend. She'd cross any border for me.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-roxy">
                            <img src="img/1.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img01"/>
                            <figcaption>
                                <h2>Charming <span>Roxy</span></h2>
                                <p>Roxy was my best friend. She'd cross any border for me.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Bubba</h2>
                <div class="grid">
                    <figure class="effect-bubba">
                            <img src="img/2.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img02"/>
                            <figcaption>
                                <h2>Fresh <span>Bubba</span></h2>
                                <p>Bubba likes to appear out of thin air.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-bubba">
                            <img src="img/16.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img16"/>
                            <figcaption>
                                <h2>Fresh <span>Bubba</span></h2>
                                <p>Bubba likes to appear out of thin air.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Romeo</h2>
                <div class="grid">
                    <figure class="effect-romeo">
                            <img src="img/17.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img17"/>
                            <figcaption>
                                <h2>Wild <span>Romeo</span></h2>
                                <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-romeo">
                            <img src="img/18.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img18"/>
                            <figcaption>
                                <h2>Wild <span>Romeo</span></h2>
                                <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Dexter</h2>
                <div class="grid">
                    <figure class="effect-dexter">
                            <img src="img/19.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img19"/>
                            <figcaption>
                                <h2>Strange <span>Dexter</span></h2>
                                <p>Dexter had his own strange way. You could watch him training ants.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-dexter">
                            <img src="img/12.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img12"/>
                            <figcaption>
                                <h2>Strange <span>Dexter</span></h2>
                                <p>Dexter had his own strange way. You could watch him training ants.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Sarah</h2>
                <div class="grid">
                    <figure class="effect-sarah">
                            <img src="img/13.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img13"/>
                            <figcaption>
                                <h2>Free <span>Sarah</span></h2>
                                <p>Sarah likes to watch clouds. She's quite depressed.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-sarah">
                            <img src="img/20.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img20"/>
                            <figcaption>
                                <h2>Free <span>Sarah</span></h2>
                                <p>Sarah likes to watch clouds. She's quite depressed.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Chico</h2>
                <div class="grid">
                    <figure class="effect-chico">
                            <img src="img/15.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img15"/>
                            <figcaption>
                                <h2>Silly <span>Chico</span></h2>
                                <p>Chico's main fear was missing the morning bus.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-chico">
                            <img src="img/4.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img04"/>
                            <figcaption>
                                <h2>Silly <span>Chico</span></h2>
                                <p>Chico's main fear was missing the morning bus.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
                <h2>
                    Milo</h2>
                <div class="grid">
                    <figure class="effect-milo">
                            <img src="img/11.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img11"/>
                            <figcaption>
                                <h2>Faithful <span>Milo</span></h2>
                                <p>Milo went to the woods. He took a fun ride and never came back.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                    <figure class="effect-milo">
                            <img src="img/3.jpg" alt="30款css3实现的鼠标经过图片显示描述特效" alt="img03"/>
                            <figcaption>
                                <h2>Faithful <span>Milo</span></h2>
                                <p>Milo went to the woods. He took a fun ride and never came back.</p>
                                <a href="#">View more</a>
                            </figcaption>            
                        </figure>
                </div>
            </div>
            <nav class="codrops-demos">
                    <a class="current-demo" href="index.html">Set 1</a>
                    <a href="index2.html">Set 2</a>
                </nav>
            <!-- Related demos -->
        </div>

复制代码via:http://www.w2bc.com/Article/19556

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: