Html 翻转图像悬停

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

以下是我想要达到的效果的链接：

目前，我的标记如下：

<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>

这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日








这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日








这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日

我们有没有办法使用相同的精确标记来实现翻转效果

---

以下是我的JSFIDLE代码：

试试这个，不要介意我所做的其他更改

正文{
背景：#3498db；
}
保险商实验室{
保证金：50px自动；
宽度：87%；
}
ulli{
显示：内联块；
利润率：0.10px；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.中心{
保证金：50px自动；
显示：块；
宽度：65%；
}
氢{
保证金：0；
}
/*滑动效应*/
.幻灯片{
位置：相对位置；
/*根据图片大小设置宽度和高度*/
宽度：300px；
高度：200px；
溢出：隐藏；
浮动：左；
右边距：20px；
背景色：rgba（26,76,110,0.5）；
}
/*段落和标题2样式，根据需要更改*/
.幻灯片p.幻灯片h2{
颜色：#ffffff；
填充：10px；
左：-20px；
顶部：20px；
位置：相对位置；
}
.幻灯片p{
字体系列：'Lato'；
字体大小：12px；
线高：18px；
保证金：0；
}
.幻灯片h2{
字体大小：20px；
线高：24px；
保证金：0；
字体系列：'Lato'；
}
/* 1. 向上滑动*/
.向上移动img{
位置：绝对位置；
左：0；
顶部：-15px；
宽度：100%；
/*将图像适配到其容器中。保留纵横比；图像不会失真*/
光标：指针；
-webkit转换：转换2秒轻松输入输出；
-moz过渡：顶部。5s易入易出；
-o型转换：前2位易进易出；
过渡：转变。5s轻松进出；
}
.幻灯片：悬停img{
-webkit变换：旋转（90度）；
背面可见性：隐藏；
/*设置为隐藏整个图像的值*/
垫底：200px；
}
幻灯片：悬停{
-webkit变换：旋转（360度）；
/*设置为隐藏整个图像的值*/
垫底：200px；
}
.a{
过渡：放松；
}

这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日









这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日









这是一个很酷的标题！
知识是一种美德，是一种美德，是一种美德，是一种美德。这是一个非常小的节日

试试这个，不要介意我做的其他更改

正文{
背景：#3498db；
}
保险商实验室{
保证金：50px自动；
宽度：87%；
}
ulli{
显示：内联块；
利润率：0.10px；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.中心{
保证金：50px自动；
显示：块；
宽度：65%；
}
氢{
保证金：0；
}
/*滑动效应*/
.幻灯片{
位置：相对位置；
/*根据图片大小设置宽度和高度*/
宽度：300px；
高度：200px；
溢出：隐藏；
浮动：左；
右边距：20px；
背景色：rgba（26,76,110,0.5）；
}
/*段落和标题2样式，根据需要更改*/
.幻灯片p.幻灯片h2{
颜色：#ffffff；
填充：10px；
左：-20px；
顶部：20px；
位置：相对位置；
}
.幻灯片p{
字体系列：'Lato'；
字体大小：12px；
线高：18px；
保证金：0；
}
.幻灯片h2{
字体大小：20px；
线高：24px；
保证金：0；
字体系列：'Lato'；
}
/* 1. 向上滑动*/
.向上移动img{
位置：绝对位置；
左：0；
顶部：-15px；
宽度：100%；
/*将图像适配到其容器中。保留纵横比；图像不会失真*/
光标：指针；
-webkit转换：转换2秒轻松输入输出；
-moz过渡：顶部。5s易入易出；
-o型转换：前2位易进易出；
过渡：转变。5s轻松进出；
}
.幻灯片：悬停img{
-webkit变换：旋转（90度）；
背面可见性：隐藏；
/*设置为隐藏整个图像的值*/
垫底：200px；
}
幻灯片：悬停{
-webkit变换：旋转（360度）；
/*设置为隐藏整个图像的值*/
垫底：200px；
}
.a{
过渡：放松；
}