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 :
GOOGLE PROJECT HOSTING
PRESTASHOP THUMBNAIL WITH HOVER EFF...
GOOGLE FILTER BUTTON IN IMAGE SEARC...
BODY JS FILE LINK IN MAGENTO
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
Related Post for POPULAR POST WIDGET HOVER EFFECT SQUARE TO CIRCLE
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
WAMP TO WORDPRESS INSTALL
INTENSO MAGENTO QUICK VIEW BUTTON
25 JS FILES DELETE IN PRESTASHOP
ABSOLUTE POPUP BOX WITH PRINT
GOOGLE PROJECT HOSTING
RENAME CSS FOLDER IN PRESTASHOP
IMPORT SQL CSV FILE ON PHPMYADMIN
BODY JS FILE LINK IN MAGENTO
Platinum Arts Sandbox Free 3D Game Maker
RENAME ADAPTER FOLDER IN PRESTASHOP
RENAME DOWNLOAD FOLDER IN PRESTASHOP
Magento Hello World Module (Extension)
MAKE WODPRESS THEME
BLOG HOSTING HELP
Direct Links to your Files on Google Drive
RENAME CONTROLLERS FOLDER IN PRESTASHOP
RENAME DOCS FOLDER IN PRESTASHOP
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
CHANGE MENU CSS COLOR IN PRESTASHOP
Direct Link Generator CODE
RENAME PDF FOLDER IN PRESTASHOP
BlogPagerWithJavaCode
NEWS TICKER BLOGGER TEMPLATES
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
JAVA FILE MAKE & SAVE IN NOTE PAD
GOOGLE FILTER BUTTON IN IMAGE SEARCH
FEATURE POST WIDGET IN BLOG
ADD POP UP REMOVER
RENAME CORE FOLDER IN PRESTASHOP
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
ON LINE JAVA LIBRARY
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
PRESTASHOP NEW THEME FOLDER
PHP CONTACT FORM WITH CAPTCHA
HOME FEATURE TAB CHANGE IN PRESTASHOP
RENAME CACHE FOLDER IN PRESTASHOP
Recommended Post Slide out for Blogger
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
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.