文字在背景圖像上懸停滾動

Question

我是新來的CSS，並且希望在我將鼠標懸停在特定背景圖像上時進行一些文字捲起。例如，http://kulturecity.org/在右側，三個圖像。我已經能夠將它放在頁面上我想要的位置，但無法實現懸停效果。

.wedo { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t height: 100%; 
 
\t width: 33.33333%; 
 
} 
 

 
.wedo-section { 
 
\t display: table; 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t border-bottom: 1px solid rgba(255,255,255,0.1); 
 
\t background: rgba(0,0,0,0.28); 
 
} 
 

 
.wedo-section.hover { 
 
\t background: rgba(0, 124, 178, 0.8); 
 
} 
 

 
.wedo-section:last-child { 
 
\t border-bottom: none; 
 
} 
 

 
.wedo-section .inner { 
 
\t display: table-cell; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
\t padding: 0 30px; 
 
} 
 

 
.wedo-section .inner h2, 
 
.wedo-section .inner h3 { 
 
\t font-size: 48px; 
 
\t margin: 0px; 
 
\t color:#333; 
 
\t font-weight: 700; 
 
} 
 

 

 

 
.wedo-section .inner p { 
 
\t color: #666; 
 
} 
 

 
.wedo-section .inner a { 
 
\t color: #666!important; 
 
} 
 

 
.wedo-section a:hover { 
 
\t color: rgba(255,255,255,0.6)!important; 
 
}

<div class="wedo bounceInRight animated"> 
 
    \t <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com">About Us</a></h2> 
 
       <div class="add"> 
 
        <p><a href="http://ipdorthocentre.tidalismdesign.com">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com/">Programs</a></h2> 
 
\t \t \t \t <div class="add"> 
 
       \t <p><a href="http://ipdorthocentre.tidalismdesign.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com/">Get Involved</a></h2> 
 
\t \t \t \t <div class="add"> 
 
       \t <p><a href="http://ipdorthocentre.tidalismdesign.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

我改變身體的背景爲黑色，所以你可以看到效果。 （全屏觀看的片段）

body { 
 
    background:#000; 
 
} 
 

 
.wedo { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t height: 100%; 
 
\t width: 33.33333%; 
 
} 
 

 
.wedo-section { 
 
\t display: table; 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t border-bottom: 1px solid rgba(255,255,255,0.1); 
 
\t background: rgba(0,0,0,0.28); 
 
} 
 

 
.wedo-section:hover { 
 
\t background: rgba(0, 124, 178, 0.8); 
 
} 
 

 
.wedo-section:last-child { 
 
\t border-bottom: none; 
 
} 
 

 
.wedo-section .inner { 
 
\t display: table-cell; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
\t padding: 0 30px; 
 
} 
 

 
.wedo-section .inner h2, 
 
.wedo-section .inner h3 { 
 
\t font-size: 48px; 
 
\t margin: 0px; 
 
\t color:#333; 
 
\t font-weight: 700; 
 
} 
 

 

 

 
.wedo-section .inner p { 
 
\t color: #666; 
 
} 
 

 
.wedo-section .inner a { 
 
\t color: #666!important; 
 
} 
 

 
/*.wedo-section a:hover { 
 
\t color: rgba(255,255,255,0.6)!important; 
 
}*/ 
 

 
.add { 
 
    max-height:0; 
 
    overflow:hidden; 
 
    transition:all .3s ease; 
 
} 
 

 
.wedo-section:hover .add { 
 
    max-height:100px; 
 
} 
 

 
.wedo-section .inner { 
 
    transition:all .3s ease; 
 
} 
 

 
.wedo-section:hover .inner { 
 
    background:rgba(0,216,255,.7); 
 
}

<div class="wedo bounceInRight animated"> 
 
    \t <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com">About Us</a></h2> 
 
       <div class="add"> 
 
        <p><a href="http://ipdorthocentre.tidalismdesign.com">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com/">Programs</a></h2> 
 
\t \t \t \t <div class="add"> 
 
       \t <p><a href="http://ipdorthocentre.tidalismdesign.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="wedo-section" style="background:url(Images/wedo1.png) 70% 50% no-repeat"> 
 
     \t <div class="inner"> 
 
      \t <h2><a href="http://ipdorthocentre.tidalismdesign.com/">Get Involved</a></h2> 
 
\t \t \t \t <div class="add"> 
 
       \t <p><a href="http://ipdorthocentre.tidalismdesign.com/">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>