Rather than comparing photos in a traditional way which is using two static photos, why not create a fantastic effect made possible by CSS3? Today spice up your photos with "Before and After" photo effects made by dynamicdrive.com. The things is, display your photos distorted and once they hover on it, the real image will reveal. You can always experiment to come up with different style.
1. First prepare your photos. If you want to upload photos to your Weebly site, just go to Design > Edit HTML/CSS > add new files. If you will get a photo from external source, just list their links. Make sure to have a pair of photos, one for "before" and the other for "after", keep the sizes perfectly the same for best results.
2. Now paste the following code to the <head> part of your site. (<head> tips HERE)
<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}
a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 300px; /* set height of image container */
}
a.nowandthen.alt img{
clip: rect(0,300px,300px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,300px,0); /* clip values should be rect(0,0,image_height,0) */
}
</style>
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}
a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 300px; /* set height of image container */
}
a.nowandthen.alt img{
clip: rect(0,300px,300px,0); /* clip values should be rect(0,image_width,image_height,0) */
}
a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,300px,0); /* clip values should be rect(0,0,image_height,0) */
}
</style>
The code above has the following values which you need to change based on the photos you will use:
Green Marks are the the first example photo dimensions.
Red Marks for the second example. Make sure to change the values correctly specially the height.
2. Now go to the page you want to insert your photos, drag one "embed tool" and use the code below. This code will give you two examples. In my demo I only used the second example with my own photo.
<a class="nowandthen">
<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>
<a class="nowandthen alt">
<img src="http://theweeblytricks.weebly.com/files/theme/distort2.jpg" alt="">
<img src="http://theweeblytricks.weebly.com/files/theme/undistort.jpeg" alt="">
</a>
<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>
<a class="nowandthen alt">
<img src="http://theweeblytricks.weebly.com/files/theme/distort2.jpg" alt="">
<img src="http://theweeblytricks.weebly.com/files/theme/undistort.jpeg" alt="">
</a>
Just change the yellow part (not only one) with your photo links. If you are using Weebly make sure to give the complete photo address as given on sample 2. If you want only one example just remove the tags starting with < and ends with >.
0 comments: