Dr.MTR Dr.MTR - 24 days ago 7
CSS Question

How to make text to appear into image box?

I started to make my own gallery, and have one thing that cant resolve..

I want text that appear in part "UNSEREN DIENSTLEISTUNGEN" from homepage, from left in this site, to be showed in similar way in other images, but with image style like other pages (sppinin images).

This is code from first image:

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


and this is image style from other images, (like i want to be, but text to appear inside box)

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


Thanks for any help.

Answer

You can just add class with changed rotation style.

For example add fullRotate class like this:

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>

And then add new rotation style for it:

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