テキストをイメージボックスに表示するにはどうすればいいですか？

Question

私はこのsiteで左から、ホームページから「UNSEREN DIENSTLEISTUNGEN」の部分に表示されるテキストは、中に同様の方法で示したことにしたい

..私自身のギャラリーを作り、そして解決カント一つのことを持って始めました他のイメージと同じですが、他のページ（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

回転スタイルが変更されたクラスを追加することができます。

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> 

をし、それのための新しい回転のスタイルを追加します：

たとえば、次のようにfullRotateクラスを追加

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