在旋转div的另一侧显示文本和bgcolor

Question

I have created a responsive grid layout with spinning divs. however the effect I am trying to achieve is that once the div has spun, instead of the image inside the div showing (reversed) I would like to have a bgcolor and some text. Could somebody show me how? If you take a look at my livelink below you will see what I mean. I shall remove this livelink when the question is answered for future posterity of the post.

Here is my Livelink

Can somebody please show me how to achieve this?

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>

Answer 1

If youre refering to your live version just add a background-color to the hover and add the text inside the div. Upon hovering the text appears and the background as well

Answer 2

You could set the bg-img in the background property , so that hovering you'd override that (with same background property) and set it to a color_

As for the content you can use content property to bring it in on hover_