我正在尝试对 div 中的一些文本进行样式化。如果你看看我下面的链接，你会看到我需要添加风格化文本的方块，下面是我创建的我希望风格化文本如何显示的图像。
有人可以告诉我如何实现这一目标吗？
CSS
.trigger {
width:200px;
height:200px;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.hover-img, .hover-img.hover_effect {
background-color: #FFFFFF;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.trigger:hover > .hover-img {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
font-size: 14px;
color: #FFF;
}
.img1 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover {
background-size: 100% 100%;
background-repeat: no-repeat;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
HTML
<div id="container">
<div class="row">
<div class="col">
<div class="trigger vertical">
<div tabindex="0" class="maincontent hover-img img"></div>
</div>
</div>
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"><span class="step">Step</span> <span class="number">1</span></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"></div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"></div>
</div>
</div>
<div class="col">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"></div>
</div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"></div>
</div>
<div class="trigger large">
<div tabindex="0" class="maincontent hover-img img5"></div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img1"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img2"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
</div>
</div>