MyBB Community Forums

Lets try some effects with CSS.

1. Image 'Fade on Hover' Effect

You might have seen social buttons (or some images) in websites which are semi-visible but if you mouse over (hover) on the image it goes normal with a smooth 'Fade In' effect.

To do that; locate any image (may say; logo - which is located in header template) in your theme templates. The link should be like:

<img src="images/mytheme/image.png" />

Now bind it into a new id; we call it 'fadehover':

<div id="fadehover"><img src="images/mytheme/image.png" /></div>

Save the template.

Now lets define the ID we have just created. For that, open your global.css and add at the bottom:

#fadehover img {
opacity: .3;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#fadehover img:hover{
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Save global.css, done. Now hover your image and see what happens.

Settings:
>> Opacity should be between 0 & 1, 0 is full transparent, 0.5 is semi-transparent, 1 is solid - not transparent.
>> duration is the mili-seconds defining how long the fade animation will take for changing its state.



2. Rollover Slide Effect

We now will learn a cool hover effect with CSS. Using this trick your logo (or orher images, text or about anything) will slide out a little and return back on lost-focus.

Locate your logo in your header template:

<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
</div>

Tag with a new ID:

<div class="logo" id="slide">

Now define the newly created ID "slide" in your global.css

#slide img {
	padding-left: 0;
	-webkit-transition: all 0.3s ease-in-out;
	}
 
#slide img:hover {
	padding-left: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	}

Save both header template and global.css.
Hover your logo image (or where you've applied) and see what happens.

Thanks for this

What if you are not using webkit? Maybe say Firefox or Internet Explorer. Isn't webkit only for Chrome and Safari or something.

Thats true. webkit is for open source browsers as you've mentioned.
That was only example. You might be repeating the same code with the following prefixes in place of -webkit- for cross browser compatibility; but I'm not confident about IE.

-moz-
-khtml-
-icab-

Nice little css edits.

I am using firefox and IE and webkit works fine for me.

Thanks for the feedback

Transitions are supported only by

-moz- (Firefox)
-webkit- (Chrome & Safari)
-o- (Opera)

(2013-01-19, 07:22 PM)ElectricShock Wrote: [ -> ]Transitions are supported only by

-moz- (Firefox)
-webkit- (Chrome & Safari)
-o- (Opera)

False.

http://caniuse.com/css-transitions

If your users have got LATEST BROWSERs, then only this small thing will work:

transition: 0.2s ease-in-out 0s;

Is there anyway I can change it so the logo gets lighter when I hover over it, instead of the other way around?