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
See The Video Below to know some Steps
| Like Us.... Receive updates on your Facebook wall!!!! |
