<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="services"> <div class="col-md-4"> <figure class="snip1174 navy col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Տեսականի</h2> <p> Մեր տեասկանին սպասում է Ձեզ </p> <a href="/main/page/production">Ավելին</a> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="snip1174 red col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Ակցիաներ</h2> <p> Թարմացվող ակցիաներ մեր հաճախորդների համար </p> <a href="/main/page/auction">Ավելին</a> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="snip1174 navy col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Մեր մասին</h2> <p> Մեր ընկերության մաին ծանոթացեք այստեղ </p> <a href="/main/page/company">Ավելին</a> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="snip1174 red col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Բաղադրատոմսեր</h2> <p> Պատրաստման հարցում Դուք ունեք Ձեր խորհրդատուն </p> <a href="/main/page/recipe">Ավելին</a> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="snip1174 navy col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Խանութների ցանկ</h2> <p> Մեր խանութների ցանկին այստեղ </p> <a href="/main/page/map">Ավելին</a> </figcaption> </figure> </div> <div class="col-md-4"> <figure class="snip1174 red col-md-4"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample33.jpg" alt="sq-sample33" /> <figcaption> <h2>Նորություններ</h2> <p> Ծանոթացեք մեր նորություններին այստեղ </p> <a href="/main/page/news">Ավելին</a> </figcaption> </figure> </div> </div>

/* Included color classes.. .red .blue .yellow .green .navy */ .services{ margin: 20px auto; } figure.snip1174 { color: #fff; position: relative; float: left; overflow: hidden; background-color: #1a1a1a; color: #ffffff; text-align: left; margin: 10px; width: 100%; border-radius: 0px; } figure.snip1174 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } figure.snip1174 img { max-width: 100%; -webkit-transform: scale(1.1); transform: scale(1.1); vertical-align: top; opacity: 0.7; } figure.snip1174 figcaption { position: absolute; padding: 40px 25px; top: 0; left: 0; } figure.snip1174 h2, figure.snip1174 p { margin: 0; padding: 0; } figure.snip1174 h2 { margin-bottom: 10px; display: inline-block; font-weight: 100; font-size: 1.8em; } figure.snip1174 p { font-weight: 300; margin-bottom: 20px; line-height: 1.4em; } figure.snip1174 a { display: inline-block; padding: 10px 20px; border: 1px solid #ffffff; text-decoration: none; color: #ffffff; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8em; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; } figure.snip1174 a:hover { background-color: rgba(0, 0, 0, 0.2); } figure.snip1174.blue { background-color: #20638f; } figure.snip1174.yellow { background-color: #c87f0a; } figure.snip1174.green { background-color: #1e8449; } figure.snip1174.navy { background-color: #222f3d; } figure.snip1174.red { background-color: #962d22; } figure.snip1174:hover img, figure.snip1174.hover img { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } figure.snip1174:hover a, figure.snip1174.hover a { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }