/* Блок информации с переворотом */
.bg-top {
    padding: 0;
    margin: 0 auto;
}

.flips-container:hover .backs {
  transform: rotateX(0deg);
    }
    .flips-container:hover .fronts {
     transform: rotateX(180deg);
    }

.flips-container, .fronts, .backs {
    width: 100%;
    height: 315px;
    margin: 0px 0px;
    display: inline-block;
}

.flippers {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.fronts {
    z-index: 2;
    transform: rotateX(0deg);
}

.fronts, .backs {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.topss {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: #FFF;
    border-bottom: 4px solid rgba(222, 93, 38, 1.6);
    border-top: 4px dotted rgba(222, 93, 38, 1.6);
}

.tops-cursor {
    background: url(http://ipsguru.ru/banners/0000FF.png) repeat; color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    position: absolute;
    bottom: -10px;
    left: 0px;
    height: 30px;
    line-height: 30px;
    box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75);
    border-radius: 3px;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
    font-weight: normal;
    font-style: italic;
}

.tops-img {
    width: 100%;
    height: 322px;
    margin: 0 auto;
}

.tops-img {
width:auto;
height: 322px;
margin:0 auto;
}

.tops-img img {
width:100%;
height: 322px;
}

.tops-ico {
  position:absolute;
  top:6px;
  left:5px;
}
.tops-ico img {}

.backs {  
    background: url(http://www.niceimage.ru/pic/201305/2560x1440/niceimage.ru-54161.jpg) repeat; color: #fff;
    transform: rotateX(-180deg);
    border-bottom: 4px solid rgba(29,84,167,0.7);
    border-top: 4px solid rgba(29,84,167,0.7);
}

.tops-line1{
width:100%;
padding:0 0 0 0px;
height:30px;
line-height:30px;
margin:2px 0;
}

.tops-line2,.tops-line3,.tops-line4{
width:100%;
padding:20px 0 0 10px;
height:30px;
line-height:30px;
margin:2px 0;
}

.tops-line3 a {font-size:11px;color:#2C3E50;}
.tops-line4 a {}

.allert-success {
    color: #34495e;
    background-color: #A5B0B6;
    border-color: #d6e9c6;
}
.allert {
    padding: -4px;
    margin-bottom: 20px;
    border: 0px solid transparent;
    border-radius: 4px;
    left:-5px;
}
.text-center {
    text-align: center;
}
/* Блок информации с переворотом конец */

<h3 class="ipsWidget_title ipsType_reset">IPSGuru.RU - Деманстративный блок</h3>

<div class=" bg-top"="">  
<div class="flips-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flippers">
  <div class="fronts">
   <div class="topss">
<div class="tops-cursor">Наведите курсор мыши на изображение</div>
<div class="tops-img"><img class="img_mp" src="/banners/bg_1.jpg" alt=""></div>
<div class="tops-ico">
<i class="fa fa-university" aria-hidden="true"></i>
<span class="label label-primary">IPSGuru.Ru</span>
</div>
</div>
  </div>
  <div class="backs">
<div class="tops-line1">
<div class="allert allert-success block-inner text-center">Короткое предложение.</div></div>   
          
<div class="tops-line2">#1 Строка с одинаковым классом CSS</div>                    
<div class="tops-line3">Специально для пользователей IPSGuru.Ru - Бесплатный код купона <b>si48sdmm61</b> на 30% скидку при оплате 100 рублей от хостинга MyHost.Su</div>
          
<div class="IPSG_Contacts_block">
<div style="position: absolute;top: 230.0px;left: 1%;"><a href="http://ipsguru.ru/" _title="Сообщество веб администраторов"><img src="http://ipsguru.ru/banners/zel468.gif" style="border: none;" alt="Хостинг игровых серверов" /></a>
</div>
</div>         
</div>
</div>  
    </div></div>