Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thead Collapse Button : Hover effects (show and hide)

envira Offline
Doctor Web
*******

Posts: 1,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
Post: #1
Lightbulb Thead Collapse Button : Hover effects (show and hide)

Hello friends,
Today upon request by @Pirate_Dominic , i am making a small tut on how to hide the collapse button on thead and show it on hover.

It actually is a feature of IPB,but then the code used here is really a basic and easy which can be done with a single line addition to your global.css.

So Copy the code given below and paste it at the bottom of your global.css of your theme.

You will have a css3 transition based hover effect of collapse button.


Code:
.thead .expcolimage img {
    opacity: 0;
    -o-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.thead:hover .expcolimage img {
    opacity: 1;
}

Demo/preview : Hover on thead's(categories) of this forum

[Image: lt79ucY.png]
08-22-2012 11:14 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #2
RE: Thead Collapse Button : Hover effects (show and hide)

Thank you so much for this tutorial Smile i hope to improve more things from you
08-22-2012 11:25 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,245
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,253.44Points
Post: #3
RE: Thead Collapse Button : Hover effects (show and hide)

(08-22-2012 11:25 PM)Pirate_Dominic Wrote:  Thank you so much for this tutorial Smile i hope to improve more things from you

My pleasure,that it helped Smile

[Image: lt79ucY.png]
08-23-2012 12:47 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Forum Hover Effect on MyBB Index Page envira 8 4,558 08-17-2014 11:59 PM
Last Post: !!!a
Smile Multiple Colored Category Headings/ Thead MyBB envira 9 4,517 07-20-2014 06:47 PM
Last Post: VetFalco
Heart css3 hover effects a tutorial myskins 10 4,051 02-14-2014 04:18 AM
Last Post: Elvenpath
  Adding Collapse Buttons to Any Table effone 1 1,383 03-30-2013 12:06 AM
Last Post: envira
Lightbulb css3 hover effects a tutorial : Part II : Hover an image myskins 0 1,606 08-31-2012 04:10 PM
Last Post: myskins

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.