如何让文字出现在图像框中?

时间:2016-11-13 19:07:50

标签: html css

我开始创建自己的画廊,有一件事无法解决..

我希望从主页,从这个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>

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您可以添加具有更改旋转样式的类。

例如,像这样添加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)
}