Tuesday, 27 August 2013
POST IMAGE WITH DIFFERENT EFFECTS CIRCULAR TO SQUARE ETC
------------------------------------------------------------------------------------
BELOW SMALL EXPERIMENT 1-5 NEED ONLY CSS CODE WHICH WRITE
BEFORE B SKIN TAG BUT EXPERIMENT NO 6 NEEDS B IF COND LINE
HEAD TAG AND STYLE CSS TAG LINE
------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
1- POST IMAGE EFFECT CIRCLE TO SQUARE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
--------------------------------------------------------------------------------------------------
2- POST IMAGE EFFECT CIRCLE TO CIRCLE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
--------------------------------------------------------------------------------------------------
3- POST IMAGE EFFECT CIRCLE TO SQUARE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 0%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
--------------------------------------------------------------------------------------------------
4- POST IMAGE EFFECT SQUARE TO CIRCLE WITH EASE EFFECT
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
--------------------------------------------------------------------------------------------------
5- POST IMAGE EFFECT SQUARE TO CIRCLE WITH EASE,ZOOM,SHADOW
WITH SOLID BORDER EFFECT
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
--------------------------------------------------------------------------------------
FINAL METHOD WITH BIG EXPERIMENT NO 6
-------------------------------------------------------------------------------------------------------
WHEN POST CLOSED POST SHOW FLOAT LEFT POST SIZE NOT CHANGE
POST IMAGE NOT SHOW ZOOM EFFECT.THIS CODE SHOWS POST LEFT HAND SIDE
ON BLOG HOME PAGE AND KEEPS IMAGES SAME SIZE AFTER HOVE EFFECT.
THIS CSS CODE WRITES UNDER B IF COND PAGE LINE AND CSS STYLE LINE IT MEANS
THESE TWO LINES <b:if cond='data:blog.pageType != "item"'>
<style type='text/css'> BUT THIS CSS CODE WRITES BEFORE CLOSE HEAD TAG
</head>
---------------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post img {
float:left;
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
float:left;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
</b:if>
</head>
---------------------------------------------------------------------------------------------------
POST OPEN CODE SHOULD WRITES BEFORE B SKIN TAG ]]></b:skin>
BELOW CODE ZOOM IMAGES WHEN POST OPEN
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height:400px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
]]></b:skin>
1- POST IMAGE EFFECT CIRCLE TO SQUARE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
--------------------------------------------------------------------------------------------------
2- POST IMAGE EFFECT CIRCLE TO CIRCLE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
--------------------------------------------------------------------------------------------------
3- POST IMAGE EFFECT CIRCLE TO SQUARE
---------------------------------------------------------------------------------------------------
.post img {
/* thumbnail properties */
margin-top: 2px;
height: 200px;
padding: 5px;
width: 200px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 0%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
--------------------------------------------------------------------------------------------------
4- POST IMAGE EFFECT SQUARE TO CIRCLE WITH EASE EFFECT
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
--------------------------------------------------------------------------------------------------
5- POST IMAGE EFFECT SQUARE TO CIRCLE WITH EASE,ZOOM,SHADOW
WITH SOLID BORDER EFFECT
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height: 400px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
--------------------------------------------------------------------------------------
FINAL METHOD WITH BIG EXPERIMENT NO 6
-------------------------------------------------------------------------------------------------------
WHEN POST CLOSED POST SHOW FLOAT LEFT POST SIZE NOT CHANGE
POST IMAGE NOT SHOW ZOOM EFFECT.THIS CODE SHOWS POST LEFT HAND SIDE
ON BLOG HOME PAGE AND KEEPS IMAGES SAME SIZE AFTER HOVE EFFECT.
THIS CSS CODE WRITES UNDER B IF COND PAGE LINE AND CSS STYLE LINE IT MEANS
THESE TWO LINES <b:if cond='data:blog.pageType != "item"'>
<style type='text/css'> BUT THIS CSS CODE WRITES BEFORE CLOSE HEAD TAG
</head>
---------------------------------------------------------------------------------------------------------
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post img {
float:left;
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
float:left;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
</b:if>
</head>
---------------------------------------------------------------------------------------------------
POST OPEN CODE SHOULD WRITES BEFORE B SKIN TAG ]]></b:skin>
BELOW CODE ZOOM IMAGES WHEN POST OPEN
---------------------------------------------------------------------------------------------------
.post img {
width: 200px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
width: 400px;
height:400px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
]]></b:skin>
---------------------------------------------------------------------------------------------------------
POST IMAGE SQUARE TO SQUARE SKEW METHOD
-----------------------------------------------------------------------------------------------------------
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 5px;
}
.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}
.post-body .tr-caption-container {
color: #222222;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
---------------------------------------------------------------------------------------------
DEMO: FOR DEMO SHOWS FULL EXPERIMENT NO 6 AND FOLLOW
INSTRUCTION IT TELLS US HOW IMAGE SQUARE TO CIRCULAR
AND HOW CHANGE SIZE WITH SIMPLE ZOOM EFFECT
-----------------------------------------------------------------------------------------------
Related movie you might like to see :
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
FEATURE POST WIDGET IN BLOG
IMPORT SQL CSV FILE ON PHPMYADMIN
Direct Link Generator CODE
Direct Links to your Files on Googl...
PHP CONTACT FORM WITH CAPTCHA
ON LINE JAVA LIBRARY
GOOGLE PROJECT HOSTING
PRESTASHOP THUMBNAIL WITH HOVER EFF...
GOOGLE FILTER BUTTON IN IMAGE SEARC...
BODY JS FILE LINK IN MAGENTO
Related Post for POST IMAGE WITH DIFFERENT EFFECTS CIRCULAR TO SQUARE ETC
POPULAR POST WIDGET ADOSOSIVE STYLE
Platinum Arts Sandbox Free 3D Game Maker
RENAME DOWNLOAD FOLDER IN PRESTASHOP
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
BlogPagerWithJavaCode
RENAME CSS FOLDER IN PRESTASHOP
PHP CONTACT FORM WITH CAPTCHA
POPULAR POST WIDGET DIFFERENT STYLES
PRESTASHOP NEW THEME FOLDER
RENAME CACHE FOLDER IN PRESTASHOP
25 JS FILES DELETE IN PRESTASHOP
FEATURE POST WIDGET IN BLOG
Direct Link Generator CODE
CHANGE MENU CSS COLOR IN PRESTASHOP
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
MAKE WODPRESS THEME
RENAME PDF FOLDER IN PRESTASHOP
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
ABSOLUTE POPUP BOX WITH PRINT
GOOGLE PROJECT HOSTING
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
RENAME CONTROLLERS FOLDER IN PRESTASHOP
IMPORT SQL CSV FILE ON PHPMYADMIN
RENAME DOCS FOLDER IN PRESTASHOP
NEWS TICKER BLOGGER TEMPLATES
ADD POP UP REMOVER
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
PAGINATION IN BLOG
Recommended Post Slide out for Blogger
RENAME ADAPTER FOLDER IN PRESTASHOP
BLOG HOSTING HELP
INTENSO MAGENTO QUICK VIEW BUTTON
Popular Posts Widget for Blogger Tweak
HOME FEATURE TAB CHANGE IN PRESTASHOP
WAMP TO WORDPRESS INSTALL
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
RENAME CORE FOLDER IN PRESTASHOP
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
Subscribe to:
Post Comments (Atom)
![Internet Download Manager Latest Version [DOWNLOAD]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWh0YOGIN6q7MIvR1YKJ5sBwUKjgPzABIUpotawkcfQULX6sVNhIfCIXjCgTM0WN9tNveYxxPJ_DMtK406WC6F8F8EXJBpzbqF6mt6hDHeWSdRY-UvjupaGqGlZQvjsUmaGU8NElIGCXU/s72-c/idm.png)
.jpg)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.