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

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

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

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

1 个答案: