August 16, 2015

Weebly Tricks #95 - Simple CSS3 Image Caption Effects

Posted by Domz at 8/16/2015
Weebly Tricks Simple CSS3 Image Caption Effects


I'm back after few months of busy life. I would like to start with some easy tutorials while coping and updating some of the basic steps I've made earlier. Today, learn how to add simple Caption Effects on your photos when hovering your mouse over them. Hopefully, you can follow it right.






HEADER CODE
Where to place these codes? Click Here!


<style>


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]-->
</style>

Notes:
You really don't have to change anything on the header codes. And as you've noticed, footer codes are not necessary for this tutorial. I would like to start from simple to more complicated.


BODY CODE
Where to place these codes? Click Here!


<figure class="figurefx default">
<img src="http://mwtdatabase.weebly.com/files/theme/text1.jpg" width="210" height="300" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="http://www.myweeblytricks.com/">A link</a></figcaption>
</figure>

<figure class="figurefx dualpanels">
<img src="http://mwtdatabase.weebly.com/files/theme/text2.jpg" width="210" height="300" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="http://www.myweeblytricks.com/">A link</a></figcaption>
</figure>

<figure class="figurefx dualpanels2">
<img src="http://mwtdatabase.weebly.com/files/theme/text3.jpg" width="210" height="300" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="http://www.myweeblytricks.com/">A link</a></figcaption>
</figure>

Notes:
Red Color - The hover effect you want to apply, available values are default, dualpanels, dualpanels2, pushup, openreveal, flipreveal.
Green text - Your image source.
Blue text - Your image dimension, in case you want to change it.
Yellow text - The text shown when hovering on each image. You may place a link on it.


CONCLUSION






Starting over again is nearly as difficult as the beginning. But with this easy tutorial, I am sure we can make more awesome tricks later... Enjoy guys!!



Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top