Friday, June 15, 2012

Pin It

Add Smooth Transform Effect to The picture


Move your mouse over image above, you will see the effect, that's the effect that we want to make, many bloggers must be want to make their blog more beutifull, more attractive. So, i make this code for my post today.

  • first, Find the First <Style> and paste the code below it
.Trans  {opacity: 0.5;margin-left: 50px;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);-ms-transform:rotate(7deg);transform: rotate(7deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 1;}
.trans:hover  {opacity: 1;zoom: 1;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);-moz-box-shadow: 1px 1px 4px #000;-webkit-box-shadow: 1px 1px 4px #000;box-shadow: 1px 1px 4px #000;} 

  • Next , when you want to Publish your post and make the effect to image, after you have finshed write your post, Don't Publish it. Click On HTML and find your image code like :
<div class="separator Trans" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-5eVhghv8RA/T9rx2_oiUUI/AAAAAAAAASo/5t_xSHPB6Ng/s1600/CSS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-5eVhghv8RA/T9rx2_oiUUI/AAAAAAAAASo/5t_xSHPB6Ng/s1600/CSS.png" /></a></div>

  •  Add Trans on <div class="
That's for the post, and what about the image outside the post. Simply, you just need to find the picture code on your Template setting, and follow the instruction above.
See The Video Below to know some Steps


    Like the Post? Do share with your Friends.

    0 komentar:

    Post a Comment