html - 翻转图像悬停

Question

我正在尝试使用无序列表和一些类创建翻转图像。

这是我想要达到的效果的链接:http://goo.gl/zVXm0B

目前这是我的标记:

<ul>

<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="images/image1.jpg" alt=""/></li>
    </ul>
</li>

<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="images/image2.jpg" alt=""/></li>
    </ul>
</li>


<li>
     <ul class="slide moveup">
        <li>
            <h2>This is a cool title!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        </li>

        <li><img class="top" src="images/image3.jpg" alt=""/></li>
    </ul>
</li>

</ul>

有什么方法可以使用完全相同的标记来实现翻转效果吗？

这是我的 JSFIDDLE 代码:http://jsfiddle.net/r26bz3xn/

Answer 1

试试这个不要介意我所做的其他更改http://jsfiddle.net/r26bz3xn/1/

body {
    background: #3498db;
}
ul {
    margin: 50px auto;
    width: 87%;
}
ul li {
    display: inline-block;
    margin: 0 10px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    margin: 50px auto;
    display: block;
    width: 65%;
}
h2 {
    margin: 0;
}
/* SLIDING EFFECTS */
 .slide {
    position:relative;
    /* Set the width and the height according to the size of your pictures */
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right: 20px;
    background-color: rgba(26, 76, 110, 0.5);
}
/* Paragraphs and Heading 2 styling, change according to your needs */
 .slide p, .slide h2 {
    color:#ffffff;
    padding:10px;
    left: -20px;
    top: 20px;
    position: relative;
}
.slide p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin: 0;
}
.slide h2 {
    font-size:20px;
    line-height:24px;
    margin: 0;
    font-family:'Lato';
}
/* 1. Sliding Up */
 .moveup img {
    position: absolute;
    left: 0;
    top: -15px;
    width: 100%;
    /*Fit the image to its container. the aspect ratio is preserved; the image will not be distorted*/
    cursor: pointer;
    -webkit-transition: transform 2s ease-in-out;
    -moz-transition: top .5s ease-in-out;
    -o-transition: top 2s ease-in-out;
    transition: transform .5s ease-in-out;
}
.slide:hover img{
    -webkit-transform:rotateY(90deg);
    backface-visibility:hidden;
    /*set to a value to hide the whole image*/
    padding-bottom:200px;
}

.slide:hover .a{
    -webkit-transform:rotateY(360deg);
    
    /*set to a value to hide the whole image*/
    padding-bottom:200px;
}

.a{
    transition:.5s ease-in;
}

<ul>
    <li>
        <ul class="slide moveup">
            <li class="a">
                 <h2>This is a cool title!</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </li>
            <li>
                <img class="top" src="http://beautyblenderdupe.com/wp-content/uploads/2015/01/01.jpg" alt="" />
            </li>
        </ul>
    </li>
    <li>
        <ul class="slide moveup">
            <li>
                 <h2>This is a cool title!</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </li>
            <li>
                <img class="top" src="http://beautyblenderdupe.com/wp-content/uploads/2015/01/01.jpg" alt="" />
            </li>
        </ul>
    </li>
    <li>
        <ul class="slide moveup">
            <li>
                 <h2>This is a cool title!</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </li>
            <li>
                <img class="top" src="http://beautyblenderdupe.com/wp-content/uploads/2015/01/01.jpg" alt="" />
            </li>
        </ul>
    </li>
</ul>