Virgonc design - G-Portál

AJÁNLOM AZ OLDALT

Blog-Frissítések-Főoldal

Image Caption effects

<style>

/*** Default shared CSS ****/

figure.figurefx{

margin: 0;

padding: 0;

display: inline-block;

position: relative;

overflow: hidden; /* hide overflowing elements by default */

}

figure.figurefx::before, figure.figurefx::after{ /* create :before and :after pseudo elements that are initially positioned outside canvas */

content: '';

width: 100%;

height: 100%;

display: block;

background: black;

position: absolute;

opacity: 0.3;

top: 0;

left 0;

-moz-transform: translate3d(0, -100%, 0); /* position elements past bottom of layout */

-webkit-transform: translate3d(0, -100%, 0);

transform: translate3d(0, -100%, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

figure.figurefx img{

display: block;

}

figure.figurefx figcaption{

position: absolute;

display: block;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

text-align: center;

background: white;

padding: 5px;

z-index: 100;

width: 100%;

max-height: 100%;

overflow: hidden;

top: 50%;

left: 0;

-moz-transform: translate3d(-100%, -50%, 0); /* position caption outside layout horizontally and centered vertically */

-webkit-transform: translate3d(-100%, -50%, 0);

transform: translate3d(-100%, -50%, 0);

opacity: 0;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

figure.figurefx figcaption a{

text-decoration: none;

}

/*** Default slide down panel effect ****/

figure.default:hover::before{

-moz-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

figure.default:hover figcaption{

opacity: 1;

-moz-transform: translate3d(0, -50%, 0); /* center caption */

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

-moz-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

/*** Dual panels slide up and down effect ****/

figure.dualpanels::after{

-moz-transform: translate3d(0, 100%, 0); /* position :after pseudo element at bottom of layout initially */

-webkit-transform: translate3d(0, 100%, 0);

transform: translate3d(0, 100%, 0);

}

figure.dualpanels:hover::before{

-moz-transform: translate3d(0, -50%, 0);

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

}

figure.dualpanels:hover::after{

-moz-transform: translate3d(0, 50%, 0);

-webkit-transform: translate3d(0, 50%, 0);

transform: translate3d(0, 50%, 0);

}

figure.dualpanels:hover figcaption{

opacity: 1;

-moz-transform: translate3d(0, -50%, 0);

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

-moz-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

/*** Dual panels slide up and down effect 2 ****/

figure.dualpanels2::before{

-moz-transform: translate3d(-100%, 0, 0); /* position :before pseudo element past left edge of layout initially */

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);

}

figure.dualpanels2::after{

-moz-transform: translate3d(100%, 0, 0); /* position :after pseudo element past right edge of layout initially */

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);

}

figure.dualpanels2:hover::before{

-moz-transform: translate3d(-50%, 0, 0);

-webkit-transform: translate3d(-50%, 0, 0);

transform: translate3d(-50%, 0, 0);

}

figure.dualpanels2:hover::after{

-moz-transform: translate3d(50%, 0, 0);

-webkit-transform: translate3d(50%, 0, 0);

transform: translate3d(50%, 0, 0);

}

figure.dualpanels2:hover figcaption{

opacity: 1;

-moz-transform: translate3d(0, -50%, 0);

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

-moz-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

transition-delay: 0.5s;

}

/*** Push Up effect ****/

figure.pushup img{

-moz-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

figure.pushup figcaption{

top: 100%;

opacity: 1;

-moz-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

figure.pushup:hover img{

-moz-transform: translate3d(0, -20px, 0); /* move image up vertically a bit for parallax effect */

-webkit-transform: translate3d(0, -20px, 0);

transform: translate3d(0, -20px, 0);

}

figure.pushup:hover figcaption{

-moz-transform: translate3d(0, -100%, 0); /* move caption up vertically to fully reveal caption */

-webkit-transform: translate3d(0, -100%, 0);

transform: translate3d(0, -100%, 0);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

/*** Open Reveal effect ****/

figure.openreveal{

overflow: visible;

perspective: 2000px;

}

figure.openreveal::before, figure.openreveal::after{

display: none;

}

figure.openreveal img{

position: relative;

z-index: 100;

-moz-transform-origin: 0 0;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-moz-transform: rotateX(0deg);

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

figure.openreveal figcaption{

z-index: 99;

opacity: 1;

-moz-transform: translate3d(0, -50%, 0); /* center caption */

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

}

figure.openreveal:hover img{

-moz-transform: rotateX(180deg); /* rotate image to reveal caption underneath */

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

/*** flipreveal Reveal effect ****/

figure.flipreveal{

overflow: visible;

perspective: 900px;

}

figure.flipreveal::before, figure.flipreveal::after{

display: none;

}

figure.flipreveal img{

position: relative;

-moz-transform: rotateX(0deg);

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

z-index: 100;

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

figure.flipreveal figcaption{

opacity: 1;

top: 0;

width: 100%;

height: 100%;

z-index: 99;

-moz-transform: rotateX(180deg) translate3d(0,0,0);

-webkit-transform: rotateX(180deg) translate3d(0,0,0);

transform: rotateX(180deg) translate3d(0,0,0);

}

figure.flipreveal:hover img{

-moz-transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

transform: rotateX(180deg);

}

figure.flipreveal:hover figcaption{

-moz-transform: rotateX(360deg) translate3d(0,0,0);

-webkit-transform: rotateX(360deg) translate3d(0,0,0);

transform: rotateX(360deg) translate3d(0,0,0);

}

</style>

<!--[if lte IE 9]>

<style>

/* IE9 and below specific CSS */

figure.figurefx::before, figure.figurefx::after{

display: none; /* hide pseudo elements, since legacy IE can't transition them */

}

</style>

<![endif]-->