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
css3 hover effects a tutorial : Part II : Hover an image

myskins Offline
Super Moderator

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 209.34Points
Post: #1
Lightbulb css3 hover effects a tutorial : Part II : Hover an image

Hello friends,
Here is the continuation of the Css3 Hover effects Tutorial where we posted the link hovering effect animation.
Now we are posting the Animation effect in hovering an Image.

If you want to know what it is ,just have a look at our logo/footer social network links,hover on them and you will find the animation effect.

I prefer to choose the animation effect of the footer social link i have applied to our theme.

Inorder to achieve this first you should style the css :

Here is the css i have used :

.fb a {
    background: url(images/myskins/social/facebook.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    float: right;
    padding-right: 5px;
    opacity: 0.5;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;

.fb a:hover {
    opacity: 1;

The -webkit-transition is the animation effect css3 code and you can choose the delay time.(i chose 250 milli seconds delay).
The opacity factor decides the animation effect and the time denotes the smoothness of animation.

Now to link the css we have to make a html code:

so in the footer template i have used this code :

<span class="fb"><a href="Your FB Page Link" target="_blank" title="Like Us on Facebook"></a></span>

You can use your own facebook page link in the code.

In this manner you can hover on multiple images,virtually every image in your forum.

I wish this helps you a lot and Thanks for reading this.


[Image: KIDsp.png]
08-31-2012 04:10 PM

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 40 10,979 11-29-2016 08:50 PM
Last Post: DmitriyCauct
Heart Enhanced Social Share buttons Tutorial without plugins envira 15 10,775 11-03-2016 09:28 AM
Last Post: shamzblueworld
  Forum Hover Effect on MyBB Index Page envira 8 5,414 08-17-2014 11:59 PM
Last Post: !!!a
Smile Tutorial to make 4 column footer for MyBB envira 9 6,359 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 15,630 07-20-2014 06:18 PM
Last Post: VetFalco
Heart css3 hover effects a tutorial myskins 10 4,733 02-14-2014 04:18 AM
Last Post: Elvenpath
Lightbulb Thead Collapse Button : Hover effects (show and hide) envira 2 2,772 08-23-2012 12:47 AM
Last Post: envira

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.