Choose from our various pricing plans. There is a package for everyone!


Header CSS styled divs

View previous topic View next topic Go down

Tutorial Header CSS styled divs

Post by Mr.Joker on Tue Jul 31, 2012 1:54 am

Hello members of CSS Help forum. In this tutorial I will show you how to make same effect as I did here:
DEMO
As you can see alone, when you hover on those divs they change color and make all look much better. So, how does it work? It's simple. I have two images. One is behind the original one (the grey one) and only thing I do here is using CSS transition opacity. I know it sound strange to you but just follow this steps and you can do the same.

1. Make two images in Photoshop
-First one should be a normal picture before hover happend, and the second one should be image that come up after we hover the div.
2. Enter CSS
Code:
#first {
  margin-left:250px;
  margin-top:40px;
  width:150px;
  background-color: transparent;
  position:relative;
}
#first img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
}
#first img.top:hover {
  opacity:0;
}
#second {
  margin-top:40px;
  margin-left: 500px;
    width:150px;
 background-color: transparent;
    position:relative;
}
#second img.top:hover {
 opacity:0;
}
#second img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
}
#third {
  margin-top:40px;
  margin-left:750px;
    width:150px;
 background-color: transparent;
    position:relative;

}
#third img.top:hover {
 opacity:0;
}
#third img {
  position:absolute;
 -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
}
3. Go to Display/Templates/General/overall_header
-Find there :
Code:
<body>
And as soon as you do that after that tag post this:
Code:
<div id="first">
    <img class="bottom" src="http://www.dodaj.rs/f/3V/vL/1mRN8Dzw/html-hover.png" />
   <img class="top" src="http://www.dodaj.rs/f/3/HQ/9VRsyes/html-default.png" />
  </div>
  <div id="second">
    <img class="bottom" src="http://www.dodaj.rs/f/6/Ea/49WrawPh/css-hover.png" />
   <img class="top" src="http://www.dodaj.rs/f/2t/68/3wRfCEQ2/css-default.png" />
  </div>
  <div id="third">
      <img class="bottom" src="http://www.dodaj.rs/f/1A/Ha/1k7Oerbz/js-hover.png" />
   <img class="top" src="http://www.dodaj.rs/f/3o/iL/2tolr5HV/js-default.png" />
  </div>
Let me explain. Here we have 3 divs. All of them got two images inside, so you need 6 images. The image with class top is normaly the top image, the starting point, and image with class bottom is the one that come out as soon as we hover the first one. Save this, publish it and there you have the effect as I had. Smile

Author: Mr.Joker
Skills required: HTML & CSS
Difficulty: Easy


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 24
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by AleksOne on Tue Jul 31, 2012 8:47 am

Nice one, i like how you explained it! ;D

Difficulty - Easy = Perfect for me :'P
avatar
AleksOne
Member
Member

Age : 22
Posts : 22
Join date : 2012-07-29
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by Rog360 on Tue Jul 31, 2012 9:09 am

Nice! Anyway to do this on PHPBB3? I'd love to do this with my Main Logo... Smile
avatar
Rog360
Member
Member

Age : 49
Posts : 12
Join date : 2012-06-28
Reputation : 0

View user profile http://project-silvermoon.forumotion.com/

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by Unknown Data on Tue Jul 31, 2012 1:45 pm

Rog360: Try using JavaScript, insertBefore Smile
Code:
var bodyElm = document.getElementsByTagName("body")[0];
var divsElms = document.createElement("div"); divsElms.innerHTML = '<div id="first"><img class="bottom" src="http://www.dodaj.rs/f/3V/vL/1mRN8Dzw/html-hover.png" /><img class="top" src="http://www.dodaj.rs/f/3/HQ/9VRsyes/html-default.png" /></div><div id="second"><img class="bottom" src="http://www.dodaj.rs/f/6/Ea/49WrawPh/css-hover.png" /><img class="top" src="http://www.dodaj.rs/f/2t/68/3wRfCEQ2/css-default.png" /></div><div id="third"><img class="bottom" src="http://www.dodaj.rs/f/1A/Ha/1k7Oerbz/js-hover.png" /><img class="top" src="http://www.dodaj.rs/f/3o/iL/2tolr5HV/js-default.png" /></div>';
bodyElm.insertBefore(divsElms, bodyElm.firstChild);
Just remember to either execute it, if you put it in an external JavaScript file.
avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by Mati™ on Tue Jul 31, 2012 2:38 pm

Really nice tut

Congratulations, your tutorial has been accepted.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by cstrike37 on Thu Aug 23, 2012 12:53 am

i cant find the < body >
im using phpbb2
avatar
cstrike37
Member
Member

Age : 23
Posts : 1
Join date : 2012-08-13
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Header CSS styled divs

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum