如何在我的网站上添加微妙的悬停效果

Question

我希望有人在这里帮助我了解如何从这个tutorial中添加微妙的悬停效果。我已经尝试了一切，我添加了.grid，我从css导入了.component。在我的网站上，我有以下HTML

<div class="sixteen columns">
    <h4 class="headline">Recent Work</h4>
</div>

    <div class="grid">
            <figure class="effect-romeo">
                <img src="images/5.jpg" alt="img05"/>
                <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="images/5.jpg" alt="img05"/>
                <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="images/5.jpg" alt="img05"/>
                <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>

<div class="clearfix"></div>

和CSS

   figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

figure.effect-romeo img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,0,300px);
    transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-romeo h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

但悬停效果很奇怪，效果不好。这些图片只有50％来自教程中提供的原始img。 希望有人能告诉我应该添加或删除的内容。

您的回答将受到高度赞赏。

谢谢。