kód:
<style type="text/css">
.cg-item {
width: 100%;
height: 100%;
border-radius: 0%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cg-info-wrap,
.cg-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 0%;
}
.cg-info-wrap {
top: 20px;
left: 20px;
background: #fff;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.cg-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
background-position: center center;
-webkit-backface-visibility: hidden;
}
.cg-info .cg-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.cg-info .cg-info-back {
opacity: 0;
background: #fff;
pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.cg-img-1 {
background-image: url(képed URL címe);
}
.cg-info h3 {
color: #fff;
letter-spacing: 1px;
font-size: 18px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: Arial;
text-shadow:
0 0 1px #000,
0 1px 2px rgba(0,0,0,0.3);
}
.cg-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.cg-info p a {
display: block;
color: #000;
font-style: normal;
font-weight: 700;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.cg-info p a:hover {
color: #fff;
}
.cg-item:hover .cg-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.cg-item:hover .cg-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
.cg-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.cg-grid:after,
.cg-item:before {
content: '';
display: table;
}
.cg-grid:after {
clear: both;
}
.cg-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}</style>
<br />
<ul class="cg-grid">
<li>
<div class="cg-item cg-img-1">
<div class="cg-info-wrap">
<div class="cg-info">
<div class="cg-info-front cg-img-1">
</div>
<div class="cg-info-back">
<br />
<br />
Szöveged helye</br>szöveg<br />
</div>
</div>
</div>
</div>
</li>
</ul>
<br />
AJÁNLOM AZ OLDALT
Archívum