MyBB Community Forums
Thead collapse image show on hover effect - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Thead collapse image show on hover effect (/thread-127353.html)



Thead collapse image show on hover effect - Harry K. - 2012-10-08

Thead collapse image effect
Im this tutorial you will learn how to add a hover effect to the Thead collapse buttons (This is seen alot on premium/custom themes) Smile

First go to global.css and find the code:
.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

Now replace that with:
.expcolimage {
	width: auto;
	float: right;
	vertical-align: middle;
	margin-top: 0px;
}
.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;
}

Then save global.css and you are done. Smile

Demo: http://icypromotion.com (Scroll over the thead)

-Xige Time.


RE: Thead collapse image show on hover effect - effone - 2012-10-09

Though the tutorial is not yours but still appreciated for sharing.


RE: Thead collapse image show on hover effect - yusril - 2012-10-09

not work for me Sad


RE: Thead collapse image show on hover effect - Client - 2012-10-11

(2012-10-09, 09:36 PM)yusril Wrote: not work for me Sad

What browser you using, also which version?


RE: Thead collapse image show on hover effect - Harry K. - 2012-10-13

(2012-10-09, 03:10 PM)effone Wrote: Though the tutorial is not yours but still appreciated for sharing.

Yes it is mine.