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

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。

模板，教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<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>Lily</h2>
            <div class="grid">
                <figure class="effect-lily">
                    <img src="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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="https://tympanus.net/Development/HoverEffectIdeas/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>
    </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.）。

模板，教程

编辑器支持Emmet

快捷键

本例汇集了10几种精致的图片悬停效果，使用了CSS3的最新属性包括3D位移（translate）和伪元素（pseudo elements.）。

模板，教程

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：