<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="container">
<div class="oneA">
<div class="imgDef1"></div>
<a href="#" class="sitehereA" title="Нажми на меня!"></a>
<h3>Заголовок 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin. </p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
<div class="oneA">
<div class="imgDef2"></div>
<a href="#" class="sitehereA" title="Нажми на меня!"></a>
<h3>Заголовок 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin. </p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
<div class="oneA">
<div class="imgDef3"></div>
<a href="#" class="sitehereA" title="Нажми на меня!"></a>
<h3>Заголовок 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit dignissim metus ac finibus. Duis non pulvinar tortor. Sed semper eleifend sollicitudin. </p>
<div class="lineTop"></div>
<div class="lineRight"></div>
<div class="lineBottom"></div>
<div class="lineLeft"></div>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
background:#EDEDED;
font-family:'Roboto',sans-serif;
}
.oneA {
width: 300px; /*ширина блока*/
height: 200px; /*высота блока*/
margin: 10px auto;
position: relative;
overflow: hidden;
background: #323A47; /*цвет фона блока*/
}
.oneA p {
color: #fff; /*цвет текста описания*/
opacity: 0;
text-align: justify;
padding: 0 20px 20px 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s;
}
.oneA h3 {
text-align: center;
color: #77B3D4; /*цвет текста заголовка*/
font-size: 20px;
margin: 0;
padding: 0;
line-height: 25px;
opacity: 0;
padding: 20px 20px 0 20px;
-webkit-transition: opacity 0.2s ease-in-out .6s;
transition: opacity 0.2s ease-in-out .6s;
}
.oneA:hover p, .oneA:hover h3{
opacity: 1;
}
.sitehereA {
position: absolute;
top:0;
left:0;
display: block;
cursor: pointer;
width: 100%;
height: 100%;
}
/* Свойства блоков с иконками */
.imgDef1, .imgDef2, .imgDef3{
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
-webkit-transition: all 0.4s ease-in-out .3s;
transition: all 0.4s ease-in-out .3s;
z-index: 10;
}
/* Изображение иконок 128x128px */
.imgDef1 {
background: url(http://storage1.static.itmages.ru/i/15/0627/h_1435430870_8814786_3a649888ce.png) no-repeat 50% 50%;
}
.imgDef2 {
background: url(http://storage2.static.itmages.ru/i/15/0627/h_1435430895_4122687_be17d396b5.png) no-repeat 50% 50%;
}
.imgDef3 {
background: url(http://storage3.static.itmages.ru/i/15/0627/h_1435430918_9012139_461a1b6c32.png) no-repeat 50% 50%;
}
/* Анимация иконки при наведении */
.oneA:hover .imgDef1, .oneA:hover .imgDef2, .oneA:hover .imgDef3 {
top:-35%;
left:-40%;
-webkit-transform:scale(0.3);
transform:scale(0.3);
}
/*Обводка*/
.lineTop, .lineRight, .lineBottom, .lineLeft {
position: absolute;
background: #77B3D4; /*цвет границы*/
-webkit-transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
transition:
top 0.4s ease-in-out 0s,
right 0.4s ease-in-out 0s,
bottom 0.4s ease-in-out 0s,
left 0.4s ease-in-out 0s;
}
.lineTop, .lineBottom { width: 100%;height: 6px;}
.lineLeft, .lineRight { width: 6px;height: 100%;}
/*граница сверху*/
.lineTop {left:-100%;top:0;}
.oneA:hover .lineTop {left:0;}
/*граница справа*/
.lineRight {top:-100%;right:0;}
.oneA:hover .lineRight {top:0;}
/*граница снизу*/
.lineBottom {right:-100%;bottom:0;}
.oneA:hover .lineBottom {right:0;}
/*граница слева*/
.lineLeft {bottom:-100%;left:0;}
.oneA:hover .lineLeft {bottom:0;}
/*другое*/
.cop {
text-align: center;
}
