使用CSS3实现的富有创意而精致的悬停动效系列2

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。本例在系列1的基础上添加了社交分享按钮的设计。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1993
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<body>
    <div class="container">
        <header class="codrops-header">
            <h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>
        </header>
        <div class="content">
            <h2>Julia</h2>
            <div class="grid">
                <figure class="effect-julia">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="img21" />
                    <figcaption>
                        <h2>Passionate <span>Julia</span></h2>
                        <div>
                            <p>Julia dances in the deep dark</p>
                            <p>She loves the smell of the ocean</p>
                            <p>And dives into the morning light</p>
                        </div>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-julia">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="img22" />
                    <figcaption>
                        <h2>Passionate <span>Julia</span></h2>
                        <div>
                            <p>Julia dances in the deep dark</p>
                            <p>She loves the smell of the ocean</p>
                            <p>And dives into the morning light</p>
                        </div>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Goliath</h2>
            <div class="grid">
                <figure class="effect-goliath">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/23.jpg" alt="img23" />
                    <figcaption>
                        <h2>Thoughtful <span>Goliath</span></h2>
                        <p>When Goliath comes out, you should run.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-goliath">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/24.jpg" alt="img24" />
                    <figcaption>
                        <h2>Thoughtful <span>Goliath</span></h2>
                        <p>When Goliath comes out, you should run.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Hera</h2>
            <div class="grid">
                <figure class="effect-hera">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/17.jpg" alt="img17" />
                    <figcaption>
                        <h2>Tender <span>Hera</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
                        </p>
                    </figcaption>
                </figure>
                <figure class="effect-hera">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/25.jpg" alt="img25" />
                    <figcaption>
                        <h2>Tender <span>Hera</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-file-pdf-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
                        </p>
                    </figcaption>
                </figure>
            </div>
            <h2>Winston</h2>
            <div class="grid">
                <figure class="effect-winston">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/30.jpg" alt="img30" />
                    <figcaption>
                        <h2>Jolly <span>Winston</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-star-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
                        </p>
                    </figcaption>
                </figure>
                <figure class="effect-winston">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img01" />
                    <figcaption>
                        <h2>Jolly <span>Winston</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-star-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
                            <a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
                        </p>
                    </figcaption>
                </figure>
            </div>
            <h2>Selena</h2>
            <div class="grid">
                <figure class="effect-selena">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/10.jpg" alt="img10" />
                    <figcaption>
                        <h2>Happy <span>Selena</span></h2>
                        <p>Selena is a tiny-winged bird.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-selena">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/31.jpg" alt="img31" />
                    <figcaption>
                        <h2>Happy <span>Selena</span></h2>
                        <p>Selena is a tiny-winged bird.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Terry</h2>
            <div class="grid">
                <figure class="effect-terry">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/16.jpg" alt="img16" />
                    <figcaption>
                        <h2>Noisy <span>Terry</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-download"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-share"></i></a>
                            <a href="#"><i class="fa fa-fw fa-tags"></i></a>
                        </p>
                    </figcaption>
                </figure>
                <figure class="effect-terry">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/26.jpg" alt="img26" />
                    <figcaption>
                        <h2>Noisy <span>Terry</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-download"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-share"></i></a>
                            <a href="#"><i class="fa fa-fw fa-tags"></i></a>
                        </p>
                    </figcaption>
                </figure>
            </div>
            <h2>Phoebe</h2>
            <div class="grid">
                <figure class="effect-phoebe">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/3.jpg" alt="img03" />
                    <figcaption>
                        <h2>Plain <span>Phoebe</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-user"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-cog"></i></a>
                        </p>
                    </figcaption>
                </figure>
                <figure class="effect-phoebe">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/7.jpg" alt="img07" />
                    <figcaption>
                        <h2>Plain <span>Phoebe</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-user"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-cog"></i></a>
                        </p>
                    </figcaption>
                </figure>
            </div>
            <h2>Apollo</h2>
            <div class="grid">
                <figure class="effect-apollo">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/18.jpg" alt="img18" />
                    <figcaption>
                        <h2>Strong <span>Apollo</span></h2>
                        <p>Apollo's last game of pool was so strange.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-apollo">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="img22" />
                    <figcaption>
                        <h2>Strong <span>Apollo</span></h2>
                        <p>Apollo's last game of pool was so strange.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Kira</h2>
            <div class="grid">
                <figure class="effect-kira">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/17.jpg" alt="img17" />
                    <figcaption>
                        <h2>Dark <span>Kira</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-home"></i></a>
                            <a href="#"><i class="fa fa-fw fa-download"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-share"></i></a>
                        </p>
                    </figcaption>
                </figure>
                <figure class="effect-kira">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/5.jpg" alt="img05" />
                    <figcaption>
                        <h2>Dark <span>Kira</span></h2>
                        <p>
                            <a href="#"><i class="fa fa-fw fa-home"></i></a>
                            <a href="#"><i class="fa fa-fw fa-download"></i></a>
                            <a href="#"><i class="fa fa-fw fa-heart"></i></a>
                            <a href="#"><i class="fa fa-fw fa-share"></i></a>
                        </p>
                    </figcaption>
                </figure>
            </div>
            <h2>Steve</h2>
            <div class="grid">
                <figure class="effect-steve">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/29.jpg" alt="img29" />
                    <figcaption>
                        <h2>Lonely <span>Steve</span></h2>
                        <p>Steve was afraid of the Boogieman.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-steve">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/33.jpg" alt="img33" />
                    <figcaption>
                        <h2>Lonely <span>Steve</span></h2>
                        <p>Steve was afraid of the Boogieman.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Moses</h2>
            <div class="grid">
                <figure class="effect-moses">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/24.jpg" alt="img24" />
                    <figcaption>
                        <h2>Cute <span>Moses</span></h2>
                        <p>Moses loves to run after butterflies.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-moses">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/20.jpg" alt="img20" />
                    <figcaption>
                        <h2>Cute <span>Moses</span></h2>
                        <p>Moses loves to run after butterflies.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Jazz</h2>
            <div class="grid">
                <figure class="effect-jazz">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/25.jpg" alt="img25" />
                    <figcaption>
                        <h2>Dynamic <span>Jazz</span></h2>
                        <p>When Jazz starts to chase cars, the whole world stands still.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-jazz">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/6.jpg" alt="img06" />
                    <figcaption>
                        <h2>Dynamic <span>Jazz</span></h2>
                        <p>When Jazz starts to chase cars, the whole world stands still.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Ming</h2>
            <div class="grid">
                <figure class="effect-ming">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/9.jpg" alt="img09" />
                    <figcaption>
                        <h2>Funny <span>Ming</span></h2>
                        <p>Ming sits in the corner the whole day. She's into crochet.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-ming">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/8.jpg" alt="img08" />
                    <figcaption>
                        <h2>Funny <span>Ming</span></h2>
                        <p>Ming sits in the corner the whole day. She's into crochet.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Lexi</h2>
            <div class="grid">
                <figure class="effect-lexi">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12" />
                    <figcaption>
                        <h2>Altruistic <span>Lexi</span></h2>
                        <p>Each and every friend is special. Lexi won't hide a single cookie.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-lexi">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/3.jpg" alt="img03" />
                    <figcaption>
                        <h2>Altruistic <span>Lexi</span></h2>
                        <p>Each and every friend is special. Lexi won't hide a single cookie.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
            <h2>Duke</h2>
            <div class="grid">
                <figure class="effect-duke">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/27.jpg" alt="img27" />
                    <figcaption>
                        <h2>Messy <span>Duke</span></h2>
                        <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
                <figure class="effect-duke">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/17.jpg" alt="img17" />
                    <figcaption>
                        <h2>Messy <span>Duke</span></h2>
                        <p>Duke is very bored. When he looks at the sky, he feels to run.</p>
                        <a href="#">View more</a>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
    
    <script>
        // For Demo purposes only (show hover effect on mobile devices)
        [].slice.call(document.querySelectorAll('.content a')).forEach(function(el) {
            el.onclick = function() {
                return false;
            }
        });
    </script>
</body>

</html>

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。本例在系列1的基础上添加了社交分享按钮的设计。

模板，教程

编辑器支持Emmet

快捷键

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。 本例在系列1的基础上添加了社交分享按钮的设计。

模板，教程

使用CSS3实现的富有创意而精致的悬停动效

使用CSS3 transforms和jQuery实现图片悬停时的3D折叠动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。本例在系列1的基础上添加了社交分享按钮的设计。