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
Direct Link Generator CODE
FEATURE POST WIDGET IN BLOG
RENAME CACHE FOLDER IN PRESTASHOP
CHANGE MENU CSS COLOR IN PRESTASHOP
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
Recommended Post Slide out for Blogger
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
ADD POP UP REMOVER
RENAME ADAPTER FOLDER IN PRESTASHOP
INTENSO MAGENTO QUICK VIEW BUTTON
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
BODY JS FILE LINK IN MAGENTO
POPULAR POST WIDGET DIFFERENT STYLES
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
RENAME DOWNLOAD FOLDER IN PRESTASHOP
RENAME CONTROLLERS FOLDER IN PRESTASHOP
GOOGLE PROJECT HOSTING
HOME FEATURE TAB CHANGE IN PRESTASHOP
RENAME DOCS FOLDER IN PRESTASHOP
POPULAR POST WIDGET ADOSOSIVE STYLE
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
PHP CONTACT FORM WITH CAPTCHA
RENAME PDF FOLDER IN PRESTASHOP
RENAME CORE FOLDER IN PRESTASHOP
BLOG HOSTING HELP
Platinum Arts Sandbox Free 3D Game Maker
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
NEWS TICKER BLOGGER TEMPLATES
RENAME CSS FOLDER IN PRESTASHOP
MAKE WODPRESS THEME
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
IMPORT SQL CSV FILE ON PHPMYADMIN
ABSOLUTE POPUP BOX WITH PRINT
BlogPagerWithJavaCode
PRESTASHOP NEW THEME FOLDER
PAGINATION IN BLOG
WAMP TO WORDPRESS INSTALL
25 JS FILES DELETE IN PRESTASHOP
Popular Posts Widget for Blogger Tweak
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.