Flipping Image Hover

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>