Weebly Tricks #100 - CSS3 Lightbox Effects

Welcome to our 100th trick and it's gonna be smooth, clean and really awesome. Great for photography sites. This lightbox overlays a bigger photo with a smooth fade in effects. The script has been edited for a better output on Weebly template. Check it out!

CLICK HERE FOR LIVE DEMO

---

CSS

---

.lb-album{
width: 750px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: right;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
  text-transform: uppercase;
  font-weight: bold;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 20px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
width: 550px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 14px;
  font-weight: bold;
line-height: 24px;
text-align: center;
width: 60px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
-webkit-animation: scaleDown 1.2s ease-in-out;
-moz-animation: scaleDown 1.2s ease-in-out;
-o-animation: scaleDown 1.2s ease-in-out;
-ms-animation: scaleDown 1.2s ease-in-out;
animation: scaleDown 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes scaleDown {
  0% { -webkit-transform: scale(10,10); opacity: 0; }
  100% { -webkit-transform: scale(1,1); opacity: 1; }
}
@-moz-keyframes scaleDown {
  0% { -moz-transform: scale(10,10); opacity: 0; }
  100% { -moz-transform: scale(1,1); opacity: 1; }
}
@-o-keyframes scaleDown {
  0% { -o-transform: scale(10,10); opacity: 0; }
  100% { -o-transform: scale(1,1); opacity: 1; }
}
@-ms-keyframes scaleDown {
  0% { -ms-transform: scale(10,10); opacity: 0; }
  100% { -ms-transform: scale(1,1); opacity: 1; }
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}
/*
100% Height for Opera as the max-height seems to be ignored, not optimal for large screens
http://bricss.net/post/11230266445/css-hack-to-target-opera
*/
x:-o-prefocus, .lb-overlay img {
    height: 100%;
}

---

HTML

---

<ul class="lb-album">
<li>
<a href="#image-1">
<img src="http://mwtdatabase.weebly.com/files/theme/css3l1.jpg" alt="image01">
<span>Frappé</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="http://mwtdatabase.weebly.com/files/theme/css3lf1.jpg" alt="image01" />
<div>
<h3>frap·pé <span>/fraˈpā/</h3>
<p>Involving a beating action of the toe of one foot against the ankle of the supporting leg</p>

</div>
<a href="#page" class="lb-close">X CLOSE</a>
</div>
</li>
<li>
<a href="#image-2">
<img src="http://mwtdatabase.weebly.com/files/theme/css3l2.jpg" alt="image01">
<span>Adagio</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="http://mwtdatabase.weebly.com/files/theme/css3lf2.jpg" alt="image01" />
<div>
<h3>a·da·gio <span>/əˈdäjō/</h3>
<p>A movement or composition marked to be played adagio</p>

</div>
<a href="#page" class="lb-close">X CLOSE</a>
</div>
</li>
    <li>
<a href="#image-3">
<img src="http://mwtdatabase.weebly.com/files/theme/css3l3.jpg" alt="image01">
<span>Plié</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="http://mwtdatabase.weebly.com/files/theme/css3lf3.jpg" alt="image01" />
<div>
<h3>pli·é  <span>/plēˈā/</h3>
<p>A movement in which a dancer bends the knees and straightens them again</p>

</div>
<a href="#page" class="lb-close">X CLOSE</a>
</div>
</li>
      <li>
<a href="#image-4">
<img src="http://mwtdatabase.weebly.com/files/theme/css3l4.jpg" alt="image01">
<span>Port de bras</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="http://mwtdatabase.weebly.com/files/theme/css3lf4.jpg" alt="image01" />
<div>
<h3>port de bras <span>/ˌpôr də ˈbrä/</h3>
<p>An exercise designed to develop graceful movement and disposition of the arms</p>

</div>
<a href="#page" class="lb-close">X CLOSE</a>
</div>
</li>
</ul>

---

CONCLUSION

---

This tutorial was made using CSS3 only. There are two more styles as you can see on Codrops. If you want this on your site, simply click the SUPPORT button on the menu. Have a nice day!!

Read More »

Weebly Tricks #99 - CSS3 Filter Function

For sure you can't resist our next tutorial. Something that sorts your images using only CSS3. The demo shows smooth appearance of photos being sorted. Additionally, a simple hover effects has been applied.

CLICK HERE FOR LIVE DEMO

---

CSS

---

.ff-container{
width: 564px;
  height: 50px;
margin: 10px auto 30px auto;
}
.ff-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
width: 25%;
  text-align: center;
height: 30px;
  font-weight: bold;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 30px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
float:left;
box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
}
.ff-container label.ff-label-type-all{
border-radius: 3px 0px 0px 3px;
}
.ff-container label.ff-label-type-3{
border-radius: 0px 3px 3px 0px;
}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{
background: #646d93;
background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad));
background: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%);
background: linear-gradient(top, #646d93 0%,#7c87ad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
color: #424d71;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset;
}
.ff-container input{
display: none;
}
.ff-items{
position: relative;
margin: 0px auto;
padding-top: 0px;
}

.ff-items a{
display: block;
position: relative;
padding: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 4px;
width: 160px;
height: 120px;
}
.ff-items a span{
display: block;
background: rgba(113,123,161, 0.9);
font-style: italic;
color: #fff;
font-weight: bold;
padding: 20px;
position: absolute;
bottom: 10px;
left: 10px;
width: 120px;
height: 0px;
overflow: hidden;
opacity: 0;
text-align: center;
text-shadow: 1px 1px 1px #303857;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span{
height: 80px;
opacity: 1;
}
.ff-items li img{
display: block;
}

.ff-items li{
margin: 0px;
float: left;
width: 188px;
  margin: 10px 0 0 0;
height: 148px;
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items li,
.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{
opacity: 1;
}

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){
opacity: 0.1;
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,
.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,
.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{
display:none;
}

---

HTML

---

<section class="ff-container">

<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
<label for="select-type-all" class="ff-label-type-all">All</label>

<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
<label for="select-type-1" class="ff-label-type-1">Web Design</label>

<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
<label for="select-type-2" class="ff-label-type-2">Illustration</label>

<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
<label for="select-type-3" class="ff-label-type-3">Icon Design</label>

<div class="clr"></div>

<ul class="ff-items">
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Chameleon</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff1.jpg" />
</a>
</li>
<li class="ff-item-type-3">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Portfolio</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff2.jpg" />
</a>
</li>
<li class="ff-item-type-2">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Flower</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff3.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Website</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff4.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-3">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Mobile Version</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff5.jpg" />
</a>
</li>
</li>
<li class="ff-item-type-1">
<a href="http://myweeblytricksdemo2.weebly.com/mwt-forum-support-and-services.html">
<span>Cake</span>
<img src="http://mwtdatabase.weebly.com/files/theme/cff6.jpg" />
</a>
</li>
</ul>

</section>

---

CONCLUSION

---

There are three available effects for this Filter Function, you can see it on the code source at the demo page. I can insert any of those on your site if you like, just click the SUPPORT tab on above.

Note that there are few adjustments made from the original codes. This is necessary to create a great output on Weebly site. Enjoy because there will be more awesome tutorials coming..

Read More »

Weebly Tricks #98 - CSS3 Sliding Image Effects

Here is another simple yet amazing slideshow that we can add on your site. Using only CSS3, we can create a beautiful image effects with 4 styles but I'm gonna show only one for this time. Thanks to Codrops, you better check it out.

CLICK HERE FOR LIVE DEMO

---

CSS CODE

---

.cr-container{
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
border: 20px solid #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
font-style: italic;
width: 150px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float:left;
position: relative;
margin-top:350px;
z-index: 1000;
  text-align: center;
}
.cr-container label:before{
content:'';
width: 34px;
height: 34px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
position: absolute;
bottom: -20px;
right: 0px;
}
.cr-container label.cr-label-img-4:after{
width: 0px;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #fff;
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-container input{
display: none;
}
.cr-bgimg{
width: 600px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.cr-bgimg{
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 400px;
left: 0px;
z-index: 2;
text-indent: -9000px;
}
.cr-bgimg div:nth-child(even) span{
top: -400px;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url(http://mwtdatabase.weebly.com/files/theme/csip4.jpg);
}
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}

.cr-container input:checked ~ .cr-bgimg div span{
-webkit-animation: slideOutUp 0.6s ease-in-out;
-moz-animation: slideOutUp 0.6s ease-in-out;
-o-animation: slideOutUp 0.6s ease-in-out ;
-ms-animation: slideOutUp 0.6s ease-in-out;
animation: slideOutUp 0.6s ease-in-out;
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span{
-webkit-animation: slideOutDown 0.6s ease-in-out;
-moz-animation: slideOutDown 0.6s ease-in-out;
-o-animation: slideOutDown 0.6s ease-in-out;
-ms-animation: slideOutDown 0.6s ease-in-out;
animation: slideOutDown 0.6s ease-in-out;
}
@-webkit-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-webkit-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-moz-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-moz-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-o-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-o-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@-ms-keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@-ms-keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
@keyframes slideOutUp{
0%{ top: 0px; }
100%{ top: -400px; }
}
@keyframes slideOutDown{
0%{ top: 0px; }
100%{ top: 400px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
top: 0px;
z-index: 10;
}
.cr-titles h3{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.cr-titles h3 span{
z-index: 10000;
position: absolute;
width: 100%;
left: 0px;
text-align: center;
opacity: 0;
}
.cr-titles h3 span:nth-child(1){
top: 15%;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 70px;
letter-spacing: 7px;
-webkit-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out, top 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(2){
top: 50%;
margin-top: 84px;
letter-spacing: 0px;
background: rgba(104,171,194,0.9);
font-size: 14px;
padding: 10px 0px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
opacity: 1;
top: 50%;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
opacity: 1;
}
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
@media screen and (max-width: 768px) {
.cr-container input{
display: inline;
width: 24%;
margin-top: 350px;
z-index: 1000;
position: relative;
}
.cr-container label{
display: none;
}
}

---

HTML CODE

---

<section class="cr-container">

<!-- radio buttons and labels -->
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>

<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>

<div class="clr"></div>

<!-- panels -->
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>

<!-- titles -->
<div class="cr-titles">
<h3>
<span>Serendipity</span>
<span>What you've been dreaming of</span>
</h3>
<h3>
<span>Adventure</span>
<span>Where the fun begins</span>
</h3>
<h3>
<span>Nature</span>
<span>Unforgettable eperiences</span>
</h3>
<h3>
<span>Serenity</span>
<span>When silence touches nature</span>
</h3>
</div>

</section>

---

CONCLUSION

---

You only need 4 good and relevant photos and you're good to go. You may also check the other three styles on Codrops.

Do you want me to add this on your site? Click THIS PAGE and I'll be glad to help.

Read More »

Weebly Tricks #97 - Blur Menu Effect

Can you really create a good landing page with Weebly? Yes you can!! It's boring to see flat sites with obsolete designs these days. In this tutorial, you can create a very beautiful landing page using a typical theme. We only need few codes. Check it out.

CLICK HERE FOR LIVE DEMO

---

PAGE HEADER CODE

---

<style>
.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
}
</style>

---

BODY CODE

---

<ul class="bmenu">
<li><a href="http://www.myweeblytricks.com/">About</a></li>
<li><a href="http://www.myweeblytricks.com/">Illustrations</a></li>
<li><a href="http://www.myweeblytricks.com/">Photography</a></li>
<li><a href="http://www.myweeblytricks.com/">Web Design</a></li>
<li><a href="http://www.myweeblytricks.com/">Personal Projects</a></li>
<li><a href="http://www.myweeblytricks.com/">Contact</a></li>
</ul>

Notes:
Yellow text - These will be your initial menus on your landing page.
Green text - These will be the links for your menus.

---

CONCLUSION

---

Now that you've set up the codes above, you'll notice the effect. To modify your page similar to the live preview, you must hide some elements on your site like the body background, your headers and footers. Weebly is awesome! Thanks to Codrops for this beautiful CSS3 effects.

Read More »

Weebly Tricks #96 - Particle Button and Glow Effect

Bored of your buttons? How about trying this unusual button effects for your site? Simple yet stuns visitors when properly blended on your site's theme. Nice to see you again :)

CLICK HERE FOR LIVE DEMO

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script>
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

(function() {

// Get the buttons.
var startBtn = document.getElementById('button');
  /*var resetBtn = document.getElementById('resetBtn');*/
// A variable to store the requestID.
var requestID;
// Canvas
var canvas = document.getElementById('canvas');
// 2d Drawing Context.
var ctx = canvas.getContext('2d');

// Variables to for the drawing position and object.
var posX = 0;
var W = 246;
  var H = 60;
  var circles = [];

  //Get canvas size
  canvas.width = 246;
  canvas.height = 60;

// Animate.
function animate() {
requestID = requestAnimationFrame(animate);
    //Fill canvas with black color
    //ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(0,0,0,0.15)";
    ctx.fillRect(0, 0, W, H);

    //Fill the canvas with circles
    for(var j = 0; j < circles.length; j++){
      var c = circles[j];

      //Create the circles
      ctx.beginPath();
      ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
          ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
      ctx.fill();

      c.x += c.vx;
      c.y += c.vy;
      c.radius -= .02;

      if(c.radius < 0)
        circles[j] = new create();
    }
 
   

}

 //Random Circles creator
      function create() {

        //Place the circles at the center

        this.x = W/2;
        this.y = H/2;


        //Random radius between 2 and 6
        this.radius = 2 + Math.random()*3;

        //Random velocities
        this.vx = -5 + Math.random()*10;
        this.vy = -5 + Math.random()*10;

        //Random colors
        this.r = Math.round(Math.random())*255;
        this.g = Math.round(Math.random())*255;
        this.b = Math.round(Math.random())*255;
      }

      for (var i = 0; i < 500; i++) {
        circles.push(new create());
      }

// Event listener for the start button.
startBtn.addEventListener('mouseover', function(e) {
e.preventDefault();

// Start the animation.
requestID = requestAnimationFrame(animate);
});

// Event listener for the stop button.
startBtn.addEventListener('mouseout', function(e) {
e.preventDefault();

// Stop the animation;
cancelAnimationFrame(requestID);
 
    e.preventDefault();

// Reset the X position to 0.
posX = 0;

// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the initial box on the canvas.
ctx.fillRect(posX, 0, boxWidth, canvas.height);
 
});


/*// Event listener for the reset button.
resetBtn.addEventListener('click', function(e) {
e.preventDefault();

// Reset the X position to 0.
posX = 0;

// Clear the canvas.
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the initial box on the canvas.
ctx.fillRect(posX, 0, boxWidth, canvas.height);
});*/


}());
  </script>

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
#content {
  background: none !important;
}
body {
  background: #45484d; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #45484d 0%, #000000 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #45484d 0%,#000000 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #45484d 0%,#000000 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  text-align:center;
}
[class*="BT"]{width:250px;display:block;position:absolute;padding:0;border-color:#0e0e0e;margin:5px 10px;line-height:6px;border-style:solid;height:60px;}
[class*="BT"] hover{position:absolute;z-index:5;width:246px;margin-left:-370px;  transition: all 0.3s ease-out 0s;    background: -moz-linear-gradient(45deg,  rgba(255,255,255,0) 0%, rgba(135,135,135,0.38) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(135,135,135,0.38)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* IE10+ */background: linear-gradient(45deg,  rgba(255,255,255,0) 0%,rgba(135,135,135,0.38) 50%,rgba(255,255,255,0) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  height:60px;margin-top:-30px;}
[class*="OH"]{overflow:hidden;}
[class*="BR"]{border-width:2px;}
[class*="R6"]{border-radius:6px;}
[class*="NF"]{background:transparent;}
[class*="BT"]:hover hover{  margin-left:123px;}
[class*="TU"]{text-transform:uppercase;}
[class*="PT"]{cursor:pointer;}
[class*="BT"] span{  position:absolute; margin-left:-55px; z-index:3;}
canvas{margin: 0;padding: 0;display:block;position:absolute;margin-top:-30px;}
</style>

---

BODY CODE
Where to place these codes? Click Here!

---

<p>
  <button id="button" class="BT-OH-BR-R6-NF-FH-FP-TU-PT">
      <canvas id="canvas"></canvas>
      <hover></hover>
      <span><a href="http://www.myweeblytricks.com">Click here</a></span>
   
  </button>

</p>

Notes:
Yellow text - This will be your text.
Green text - The link for the button when clicked.

---

CONCLUSION

---

There are few adjustments when you don't get the output as seen on the live demo. It could be your site's default background, font size and link colors. Anyway, I will try to help you on the forum. I will also try to be active again after some busy months. Enjoy.

Read More »

Weebly Tricks #95 - 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.

CLICK HERE FOR LIVE DEMO

---

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!!

Read More »