<template>
    <div class="hover-page">
        <div class="test-div">
            <div>
                <div class="hover-div"></div>
                <p class="hidden-p">这本该隐藏的东西</p>
            </div>
        </div>

        <h1>CSS Image Hover Effects</h1>
        <p>View the article</p>

        <h2>No Effect</h2>
        <div class="column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo01">1.Zoom In #1</h2>
        <div class="hover01 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo02">2.Zoom In #1</h2>
        <div class="hover02 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo03">3.Zoom Out #1</h2>
        <div class="hover03 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo04">4.Zoom Out #2</h2>
        <div class="hover04 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo05">5. Slide</h2>
        <div class="hover05 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
        <div class="hover06 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo07">7. Blur</h2>
        <div class="hover07 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo08">8. Gray Scale</h2>
        <div class="hover08 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo09">9. Sepia</h2>
        <div class="hover09 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo10">10. Blur + Gray Scale</h2>
        <div class="hover10 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo11">11. Opacity #1</h2>
        <div class="hover11 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo12">12. Opacity #2</h2>
        <div class="hover12 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo13">13. Flashing</h2>
        <div class="hover13 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo14">14. Shine</h2>
        <div class="hover14 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

        <h2 id="demo15">15. Circle</h2>
        <div class="hover15 column">
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic01.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic02.jpg"/></figure>
                <span>Hover</span>
            </div>
            <div>
                <figure><img src="https://nxworld.net/example/css-image-hover-effects/pic03.jpg"/></figure>
                <span>Hover</span>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'hover'
  }
</script>

<style lang="less" scoped>
    @import "./hover.less";
</style>