CSS kód :
<style type="text/css">
/* infó box - hover effecttel - //cameron.gportal.hu/ */
#content-single {
width: 100%;
height: auto;
clear: both;
}
article.mini {
width: 620px;
margin: 0 3% 3% 0;
position: relative;
overflow: hidden;
float: left;
background: #000;
text-align: center;
cursor: pointer;
}
article.mini:nth-child(even) {
margin-right: 0;
}
article.archives {
margin: 0 3% 3% 0!important;
}
article.archives:nth-child(odd) {
margin-right: 0!important;
}
article.mini:hover {
background: -webkit-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);
background: linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);
background: -moz-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);
background: -o-linear-gradient(45deg, #BE1C18 0%,#845E47 40%,#000000 100%);
}
article.mini img {
width: 100%;
height: auto;
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
article.mini:hover img {
opacity: 0.4;
}
article.mini figcaption::before,
article.mini figcaption::after {
position: absolute;
top: 5%;
right: 4%;
bottom: 5%;
left: 4%;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s,
-webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
article.mini figcaption::before {
border-top: 1px solid #ffeada;
border-bottom: 1px solid #ffeada;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
article.mini figcaption::after {
border-right: 1px solid #ffeada;
border-left: 1px solid #ffeada;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
article.mini:hover figcaption::before,
article.mini:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
article.mini time {
width: 20%;
opacity: 1;
font: 700 15px 'Open Sans';
-webkit-transition: opacity 0.35s,
-webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
position: absolute;
top: 50%;
left: 4%;
border: 1px solid #ffeada;
color: #ffeada;
}
article.mini h4 {
opacity: 1;
font: 700 17px 'Open Sans';
-webkit-transition: opacity 0.35s,
-webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
position: absolute;
bottom: 20%;
left: 5%;
right: 5%;
z-index: 9;
text-decoration: none;
}
article.mini:hover h4,
article.mini:hover time {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
article.mini h4 a {
color: #ffeada;
text-decoration: none;
}
.leiamais {
width: 46.5%;
padding: 2% 1%;
margin: 0 auto 5%;
background: #131212;
border: 1px solid #B31C1C;
font: 700 12px Raleway;
letter-spacing: 2px;
text-align: center;
clear: both;
}
.leiamais:hover {
background: #961212;
}
.leiamais a {
color: #fff;
}
</style>