CSS Spinning Div Background Color

Question

I have implemented spinning div s using CSS animation. Each div has an image inside and an on hover the div spins. When spinning, the image should be hidden displayed and replaced with text displayed in the div with a specific background-color .

I want background-color to be different for each div but as it stands the only way I have found to do it is to have the background color the same for each spinning div. This is defined using .trigger:hover > .hover-img { in the CSS.

How can I make the background-color different for each spinning div ?

  .trigger { width:200px; height:200px; } .trigger.large { width: 400px; } .trigger.vertical { height: 400px; } .trigger.vertical * { height: 400px; } .hover-img, .hover-img.hover_effect { 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-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(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); font-size: 14px; color: #FFF; background-color: #f47878; } .trigger:hover .hover-img img { display: none; } #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; } 

  <div class="col"> <div class="trigger"> <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/>Text Here 4</div> </div> <div class="trigger"> <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/>Text Here 5</div> </div> </div> <div class="col"> <div class="trigger"> <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/>Text Here 6</div> </div> <div class="trigger"> <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/>Text Here 7</div> </div> </div> 

Answer 1

You can use unique class as told by #Ruddy not a big deal.

.trigger:hover > .hover-img.img4 {
    background-color: #f00;
}
.trigger:hover > .hover-img.img5 {
    background-color: #ff0;
}
.trigger:hover > .hover-img.img6 {
    background-color: #000;
}
.trigger:hover > .hover-img.img7 {
    background-color: #0ff;
}

Answer 2

Don't include the background declaration on .hover-img , instead declare it on .imgX

.img1 { background: white; }
.img2 { background: blue; }
.img3 { background: red; }
.img4 { background: green; }