-
Kör alakú képeffekt 2.
Ide jöhet a szöveg.
Linket, képet is lehet tenni.
Until The End Design
Minta szöveg. Minta szöveg.
Minta szöveg. Minta szöveg.
Minta szöveg. Minta szöveg.
Minta szöveg. Minta szöveg.
Minta szöveg. Minta szöveg.
Kód
<style type="text/css">
.cg-info-wrap,
.cg-info{
position: absolute;
width: 200px; /* kicsi kör szélessége */
height: 200px; /* kicsi kör magassága */
border-radius: 50%;
}
.cg-info-wrap {
top: 30px; /* kicsi kör helyzete fentről */
left: 30px; /* kicsi kör helyzete balról */
background: #ffffff; /* a kép és a szöveg váltakozásánál a háttér színe */
box-shadow: 0 0 0 20px rgba(255,255,255,0.8); /* átlátszó keret színe, 0,8 pedig az átlátszóságot mutatja, 20px a keret szélessége */
}
.cg-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 250px; /* kis kép kör alakú */
background-position: center left; /* kis kép háttér pozíciója */
-webkit-backface-visibility: hidden;
}
.cg-img-1 { /* a doboz háttérképe */
background-image: url(http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1402150912_27.jpg);
}
.cg-info-back { /* szöveg a dobozban */
color: #ffffff;
font-size: 12px;
font-family: Arial;
line-height: 15px;
}
.cg-info .cg-info-front {
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.cg-info .cg-info-back {
opacity: 0;
background: #6A686B; /* háttér színe a szöveg alatt */
-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-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-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
}
.cg-grid {
list-style: none;
display: block;
text-align: center;
}
.cg-grid:after,
.cg-item:before {
content: '';
display: table;
}
.cg-grid:after {
clear: both;
}
.cg-grid li {
width: 300px; /* nagy kör szélessége */
height: 300px; /* nagy kör magassága */
display: inline-block;
}</style>
Nincsenek megjegyzések:
Megjegyzés küldése