이미지 상자에 텍스트를 표시하는 방법은 무엇입니까?

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