//////////****   стили   *///////////



    <style type="text/css">

		.green-block {

		position: relative;

		width: 206px;

		height: 150px;

		margin: 0 0 11px 11px;

		float: left;

		}

        .green-block {

            perspective: 800px;

            -ms-perspective: 800px;

            -o-perspective: 800px;

            -moz-perspective: 800px;

            -webkit-perspective: 800px;

        }

        .green-block .top {

            transform-style: preserve-3d;

            -ms-transform-style: preserve-3d;

            -o-transform-style: preserve-3d;

            -moz-transform-style: preserve-3d;

            -webkit-transform-style: preserve-3d;

            backface-visibility: hidden;

            -ms-backface-visibility: hidden;

            -o-backface-visibility: hidden;

            -moz-backface-visibility: hidden;

            -webkit-backface-visibility: hidden;

            -webkit-transition: -webkit-transform 0.4s ease-out;

            -moz-transition: -moz-transform 0.4s ease-out;

            -ms-transition: -ms-transform 0.4s ease-out;

            -o-transition: -o-transform 0.4s ease-out;

            transition: transform 0.4s ease-out;

        }

        .green-block .bottom {

            transform-style: preserve-3d;

            -ms-transform-style: preserve-3d;

            -o-transform-style: preserve-3d;

            -moz-transform-style: preserve-3d;

            -webkit-transform-style: preserve-3d;

            backface-visibility: hidden;

            -ms-backface-visibility: hidden;

            -o-backface-visibility: hidden;

            -moz-backface-visibility: hidden;

            -webkit-backface-visibility: hidden;

            -webkit-transition: -webkit-transform 0.4s ease-out;

            -moz-transition: -moz-transform 0.4s ease-out;

            -ms-transition: -ms-transform 0.4s ease-out;

            -o-transition: -o-transform 0.4s ease-out;

            transition: transform 0.4s ease-out;

            transform: rotateY(180deg);

            -ms-transform: rotateY(180deg);

            -o-transform: rotateY(180deg);

            -moz-transform: rotateY(180deg);

            -webkit-transform: rotateY(180deg);

        }

        .green-block:hover .top {

            transform: rotateY(-180deg);

            -ms-transform: rotateY(-180deg);

            -o-transform: rotateY(-180deg);

            -moz-transform: rotateY(-180deg);

            -webkit-transform: rotateY(-180deg);

        }

        .green-block:hover .bottom {

            transform: rotateY(0deg);

            -ms-transform: rotateY(0deg);

            -o-transform: rotateY(0deg);

            -moz-transform: rotateY(0deg);

            -webkit-transform: rotateY(0deg);

        }

		.green:before, .green:after {

display: table;

content: "";

line-height: 0;

}

.green-block .bottom .descr,

.green-block .top {

	background: #2c9e52;

}

.green-block .top .gb-direction {

	color: #57f28b;

	background: url("img/arrow.png") 100% 50% no-repeat;

}



.green .green-block:nth-child(0) .top,

.green .green-block.spring-0 .top {

	background: #2c9e52 url() no-repeat 100% 0;

}

/*    green

	----------------------------------------------------------------- */

.green {

  *zoom: 1;

  margin: 0 0 21px -11px;

  min-height: 150px;

}

.green:before,

.green:after {

  display: table;

  content: "";

  line-height: 0;

}

.green:after {

  clear: both;

}

.green .loader {

  display: block;

  margin: 43px auto;

}

.green-block {

  position: relative;

  width: 206px;

  height: 150px;

  margin: 0 0 11px 11px;

  float: left;

}

.green-block .top {

  display: block;

  position: relative;

  z-index: 2;

  width: 166px;

  height: 118px;

  padding: 17px 20px 15px;

  color: #fff;

  background: #2f945e;

  line-height: 1.2;

}

.green-block .top strong {

  display: block;

  font-family: 'open_sanssemibold';

  font-size: 16px;

  height: 38px;

  padding: 0 0 2px;

}

.green-block .top span {

  display: block;

}

.green-block .top .gb-price {

  font-family: 'open_sanslight';

  font-size: 27px;

  padding: 19px 0 8px;

}

.green-block .top .gb-price span {

  display: inline;

  font-size: 16px;

}

.green-block .top .gb-direction {

  color: #7decae;

  background: url("../img/official/green-block.gif") 100% 50% no-repeat;

  height: 19px;

}

.green-block .bottom {

  position: absolute;

  top: 0;

  right: 0;

  width: 206px;

  height: 150px;

  z-index: 1;

}

.green-block .bottom .descr {

  width: 206px;

  bottom: 0;

  position: absolute;

  background: #32945e;

  background: rgba(50, 148, 94, 0.8);

  font-size: 13px;

  padding: 1px 0;

  color: #fff;

  display: block;

  *display: none;

}

.green-block .bottom .descr .in {

  display: block;

  padding: 0 10px;

}

.green-block {

  perspective: 800px;

  -ms-perspective: 800px;

  -o-perspective: 800px;

  -moz-perspective: 800px;

  -webkit-perspective: 800px;

}

.green-block .top {

  transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  backface-visibility: hidden;

  -ms-backface-visibility: hidden;

  -o-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  -webkit-transition: -webkit-transform 0.4s ease-out;

  -moz-transition: -moz-transform 0.4s ease-out;

  -ms-transition: -ms-transform 0.4s ease-out;

  -o-transition: -o-transform 0.4s ease-out;

  transition: transform 0.4s ease-out;

}

.green-block .bottom {

  transform-style: preserve-3d;

  -ms-transform-style: preserve-3d;

  -o-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  backface-visibility: hidden;

  -ms-backface-visibility: hidden;

  -o-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  -webkit-transition: -webkit-transform 0.4s ease-out;

  -moz-transition: -moz-transform 0.4s ease-out;

  -ms-transition: -ms-transform 0.4s ease-out;

  -o-transition: -o-transform 0.4s ease-out;

  transition: transform 0.4s ease-out;

  transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  -o-transform: rotateY(180deg);

  -moz-transform: rotateY(180deg);

  -webkit-transform: rotateY(180deg);

}

.green-block:hover .top {

  transform: rotateY(-180deg);

  -ms-transform: rotateY(-180deg);

  -o-transform: rotateY(-180deg);

  -moz-transform: rotateY(-180deg);

  -webkit-transform: rotateY(-180deg);

}

.green-block:hover .bottom {

  transform: rotateY(0deg);

  -ms-transform: rotateY(0deg);

  -o-transform: rotateY(0deg);

  -moz-transform: rotateY(0deg);

  -webkit-transform: rotateY(0deg);

}

.green .big {

  width: 314px;

}

.green .big .top {

  width: 274px;

}

.green .big .bottom {

  width: 314px;

}





 </style>



/*****////  Код *  ////





<section class="green" id="specials">

<div class="green-block snow_1" href="#">

            <a href="#" class="top">

             <strong>Москва — Кишинев</strong>

              <span class="gb-price"><span>от</span> 4 900 руб.</span>

            <span class="gb-direction">в одну сторону</span>

             </a>

             <a href="#" class="bottom">

             <img src="http://linkme.ufanet.ru/images/bc15c31ddf9c9e96c7f70e9444c85471.png" width="206" height="150" alt="Москва &amp;mdash;Кишинев">

               <span class="descr"><span class="in">Кишинев</span></span>

               </a>

                 </div>

</section>