30 CSS3-implemented mouse passing picture display description effects_html/css_WEB-ITnose

Today I will share with you 30 CSS3-implemented special effects for displaying descriptions when the mouse passes over pictures. When the mouse passes over these pictures, the descriptions of the pictures will be displayed in a very dazzling way. For best results, please browse in modern browsers such as IE10, Chrome, Firefox and Safari.

Online preview Source code download

The implemented code.

html code:

 <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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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