<style type="text/css">
.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;}
.ch-info-wrap{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #ccc;
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);}
.ch-info{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;}
.ch-info .ch-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #fff; }
.ch-img-1 { background-image: url(http://www.popularphotographybiz.com/wp-content/uploads/2014/02/vintage-photography-tumblr-themesshare-your-smile-with-everyone-t8jln1ti.jpg);background-size:510px;}
.ch-item:hover .ch-info-wrap {
box-shadow:
0 0 0 0 rgba(255,255,255,0.8),
inset 0 0 3px rgba(115,114, 23, 0.8);}
.ch-item:hover .ch-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;}
.ch-grid:after {
clear: both;}
.ch-grid li {
width: 320px;
height: 320px;
display: inline-block;
margin: 20px;}
</style>
<br />
<center>
<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
<br />
<br />
Virágos
<br />
<a href="http://link.com/" target="_blank">Linket </a> is elhelyezhetsz, ha szeretnél.
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
<style type="text/css">
.cg-item {
width: 100%;
height: 100%;
border-radius: 50%;
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: 50%;
}
.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: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.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: #f1d5cd;
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(http://1.bp.blogspot.com/-MHpve4TS1o0/UNZMr0oYlmI/AAAAAAAAASg/UNhOp_N6ij4/s1000/tumblr_m0pdlnQJ4U1r93c7do1_500.jpg);
}
.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 />
<br />
<br />
Szövegszöveg<br />
szövegszöveg
<br />
<a href="http://link.com/" target="_blank">Linket </a> is elhelyezhetsz, ha szeretnél.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Forrás: Ez itt :)
Nincsenek megjegyzések:
Megjegyzés küldése