Home4 posters
How to do this in #pun-intro (CSS)
!_NICK_!- Active Poster
Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
by !_NICK_! May 27th 2012, 9:18 pmLast edited by !_NICK_! on May 28th 2012, 8:00 pm; edited 1 time in total
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
You mean the logo? That would be a background image being moved on hover. Using CSS3 transitions to create the sliding sort of effect.
Dark_Code- Forumember
- Posts : 91
Reputation : 4
Language : CSS
Location : Modesto
here it is for Phpbb3
and here it is for Punbb
- Code:
.headerbar {
border-radius: 10px;
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 0%;-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
height: 180px;
}
.headerbar:hover {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 100%;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;}
and here it is for Punbb
- Code:
#pun-intro {
border-radius: 10px;
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 0%;-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
height: 180px;
}
#pun-intro:hover {
background: url(http://i44.servimg.com/u/f44/16/84/52/28/abstra10.jpg);background-position: 80% 100%;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;}
!_NICK_!- Active Poster
- Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.
@LGforum - Thanks for telling me what it was called.
@Dark_Code - Thanks for posting both codes. Very much appreciated!
@Staff - Solved!
@Dark_Code - Thanks for posting both codes. Very much appreciated!
@Staff - Solved!
SLGray- Administrator
- Posts : 51555
Reputation : 3524
Language : English
Location : United States
!_NICK_! wrote:@Staff - Solved!
| Topic Solved & Locked |
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.