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
Popular Posts Widget for Blogger Tweak
POPULAR POST WIDGET DIFFERENT STYLES
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE
RENAME DOCS FOLDER IN PRESTASHOP
PAGINATION IN BLOG
POST LOADER TEMPLATE 
BlogPagerWithJavaCode
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
ADD POP UP REMOVER
GOOGLE PROJECT HOSTING
POPULAR POST SCROLL IN SIDEBAR TEMPLATE
RENAME ADAPTER FOLDER IN PRESTASHOP
BLOG HOSTING HELP
POST LOADER TEMPLATE
PRESTA CSS JS FILE LINKS REMOVE BY DELETE FILES 
PHP CONTACT FORM WITH CAPTCHA
RENAME DOWNLOAD FOLDER IN PRESTASHOP
HOME FEATURE TAB CHANGE IN PRESTASHOP
RENAME CORE FOLDER IN PRESTASHOP
AFTER INSTALL PRESTASHOP MAKE NEW FOLDERS
DEFAULT BOOT STRAP WORD IN 13 FILES PRESTASHOP 
RENAME CACHE FOLDER IN PRESTASHOP
RENAME PDF FOLDER IN PRESTASHOP
MAKE WODPRESS THEME
25 JS FILES DELETE IN PRESTASHOP
CHANGE MENU CSS COLOR IN PRESTASHOP
Direct Link Generator CODE
Platinum Arts Sandbox Free 3D Game Maker
FONT LINE FIND IN PRESTA SHOP FILE SEEK SOFTWARE
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES
POPULAR POST WIDGET ADOSOSIVE STYLE
ABSOLUTE POPUP BOX WITH PRINT
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
PRESTASHOP HOME PAGE TAB BREAD CRUMBS STYLE
NEWS TICKER BLOGGER TEMPLATES
RENAME CONTROLLERS FOLDER IN PRESTASHOP
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
Recommended Post Slide out for Blogger
RENAME CSS FOLDER IN PRESTASHOP
RECENT/FEATURED POST THUMBNAIL IMAGE IN SIDEBAR
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.