Wednesday, 4 September 2013
POPULAR POST WIDGET HOVER EFFECT SQUARE TO CIRCLE
--------------------------------------------------------------------------------------------------
FIND AND REPLACE YOUR B SKIN TAG WITH BELOW CODE
]]></b:skin>
---------------------------------------------------------------------------------------------------
/* PopularPosts http://fbgadgets.blogspot.co.uk */
.PopularPosts .widget-content ul li {
padding:0;
position:relative
}
.item-snippet {
font-size:90%;
line-height:1.2em;
position:absolute;
width:230px;
background-color:whiteSmoke;
padding:7px;
border-top:2px solid #FF0202;
z-index:2;
left:300px;
top:60%;
height:4.5em!important;
visibility:hidden;
opacity:0;
transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
left:60px;
opacity:1;
visibility:visible
}
.PopularPosts img {
width:50px;
height:50px
margin:15px 15px 10px 0px;
float:left;
padding:3px;
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;
}
.PopularPosts img:hover {
height:90px;
width:90px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
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
}
.PopularPosts .item-title {
font-family:'Open Sans Condensed',
"Arial Narrow",Arial,sans-serif;
font-size: 125%
}
/* PopularPosts http://fbgadgets.blogspot.co.uk */
]]></b:skin>
.PopularPosts .widget-content ul li {
padding:0;
position:relative
}
.item-snippet {
font-size:90%;
line-height:1.2em;
position:absolute;
width:230px;
background-color:whiteSmoke;
padding:7px;
border-top:2px solid #FF0202;
z-index:2;
left:300px;
top:60%;
height:4.5em!important;
visibility:hidden;
opacity:0;
transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
left:60px;
opacity:1;
visibility:visible
}
.PopularPosts img {
width:50px;
height:50px
margin:15px 15px 10px 0px;
float:left;
padding:3px;
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;
}
.PopularPosts img:hover {
height:90px;
width:90px;
margin:15px 15px 10px 0px;
float:left;
padding:3px;
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
}
.PopularPosts .item-title {
font-family:'Open Sans Condensed',
"Arial Narrow",Arial,sans-serif;
font-size: 125%
}
/* PopularPosts http://fbgadgets.blogspot.co.uk */
]]></b:skin>
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 POPULAR POST WIDGET HOVER EFFECT SQUARE TO CIRCLE
BLOGGER GRID LIST SHOPPING CART TEMPLATE
GOOGLE PROJECT HOSTING
SSL WEBSITE CHECKER FOR FACEBOOK
FREE SLL CERFICATE BY AZURE MICROSOFT FOR FACEBOOK
RENAME CACHE FOLDER IN PRESTASHOP
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
BLOG HOSTING HELP
RENAME CONTROLLERS FOLDER IN PRESTASHOP
POST LOADER TEMPLATE
CHANGE MENU CSS COLOR IN PRESTASHOP
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
CANVAS GAMES TUTORIAL ON FACE BOOK
BLOGGER GRID LIST SHOPPING CART TEMPLATE
RENAME PDF FOLDER IN PRESTASHOP
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
RECAPTCHA REGISTER FORM
SHOPPING CART IN SIDEBAR TEMPLATE
ADD POP UP REMOVER
UNITY 3D DECOMPILER OBFUSCATOR
POPULAR POST WIDGET ADOSOSIVE STYLE
Popular Posts Widget for Blogger Tweak
RENAME ADAPTER FOLDER IN PRESTASHOP
ABSOLUTE POPUP BOX WITH PRINT
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
MAKE WODPRESS THEME
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
PAGINATION IN BLOG
RECENT OR FEATURE POST LIST BADGE WIDGET WITH GOOGLE PROJECT 
RENAME CSS FOLDER IN PRESTASHOP
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
RENAME DOCS FOLDER IN PRESTASHOP
AMAZON CLOUD DRIVE
Platinum Arts Sandbox Free 3D Game Maker
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
SELL YOUR APPS
Recommended Post Slide out for Blogger
25 JS FILES DELETE IN PRESTASHOP
Direct Link Generator CODE
PAGE NAVIGATION WITH TITLE AND THUMBNAIL BY HTML/JAVA WIDGET
POPULAR POST WIDGET DIFFERENT STYLES
RENAME CORE FOLDER IN PRESTASHOP
RENAME DOWNLOAD FOLDER IN PRESTASHOP
Facebook App With or Without SSL Certificate
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
SHOPPING CART IN SIDEBAR TEMPLATE
DRAG AND DROP MULTIPLE UPLOAD
HOME FEATURE TAB CHANGE IN PRESTASHOP
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
PHP CONTACT FORM WITH CAPTCHA
BlogPagerWithJavaCode
POST LOADER TEMPLATE 
NEWS TICKER BLOGGER TEMPLATES
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.