использование CSS-перехода при опрокидывании другого элемента

У меня есть div с фоном, расположенным абсолютно поверх изображения. Когда я переворачиваю div, он меняет цвета, используя переход css3.

Но то, что я хотел знать, это то, можно ли перевернуть изображение или div и изменить его цвет в любом случае?

<a href="http://localhost/">
      <div style="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px;  ">
        <div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; " class="category_roll">Camouflage Work Pants </div>

        <img src="images/cat_camo_pants.png" alt="Camouflage Work Pants" title=" Camouflage Work Pants " width="233" height="156">
      </div></a> 

CSS:

.category_roll {
-webkit-transition: all 0.24s ease-out;
-moz-transition: all 0.24s ease-out;
-ms-transition: all 0.24s ease-out;
-o-transition: all 0.24s ease-out;
transition: all 0.24s ease-out;
-webkit-transition: all 0.24s ease-out 1s ease-in-out 0s;
-moz-transition: all 0.24s ease-out 1s ease-in-out 0s;
-ms-transition: all 0.24s ease-out 1s ease-in-out 0s;
-o-transition: all 0.24s ease-out 1s ease-in-out 0s;
transition: all 0.24s ease-out 1s ease-in-out 0s;
background: rgba(0, 0, 0, 0.7);
}

.category_roll:hover {background: rgba(201, 135, 2, 0.95);}

это что-то, что потребует javascript?