如何讓文字出現在圖像框中？

Question

我開始做我自己的畫廊，並有一兩件事是不能化解..

我希望出現在部分「UNSEREN DIENSTLEISTUNGEN」從主頁，從留在這個site，文本在類似的方式表明其他圖像，但像其他頁面（sppinin圖像）的圖像風格。

這是第一形象代碼：

<div class="serviceQuad"> 
    <div class="tr-slideImgOut"><img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" /></div> 
    <span class="figure tr-slideIn" href="">{{insert_content::26}}</span></div> 

，這是影像風格與其他圖像，（就像我想要的，但文字顯示箱內）

<div class="serviceQuad"> 
    <div class="morph"><img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" /></div> 
    <span class="morph" href="">{{insert_content::26}}</span></div> 

感謝任何幫助。

Answer 1

您可以添加更改旋轉樣式的類。

例如添加fullRotate類是這樣的：

HTML

<div class="serviceQuad"> 
    <div class="tr-slideImgOut fullRotate"> 
     <img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" /> 
    </div> 
    <span class="figure tr-slideIn" href="">{{insert_content::26}}</span> 
</div> 

，然後添加新的旋轉樣式吧：

CSS

.serviceQuad:hover .tr-slideImgOut.fullRotate img { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg) 
}