top



Hello members of WD,

I was wondering when hovering over the images on the navigation bar on the left, how the words come out? I believe that is CSS but I cannot find a code for it. o-o

I don't know why all ask about thing from wd Razz
here:

Code:
<style>
.icon0 {font:10px verdana;position:relative;left:-4px;top:-19px;padding:2px 3px 4px;width:50px;
background: rgba(0,0,0,0.88);color:white;opacity:0;z-index:-1;margin-left:6px;white-space:no-wrap;text-wrap:none;}
.icon0:hover {opacity:0 !important;cursor:default;
</style>


<div style="position:fixed;left:0px;right:auto;bottom:0px;top:25px;margin:auto 0;vertical-align:center;padding:20px 1px;heig-t:300px;height:180px;width:150px;vertical-align:middle;}">

<li style="list-style:none;"><a href="#" style="text-decoration:none;cursor:default;"><img onmouseover="{document.getElementById('test').style.opacity='1';document.getElementById('icon1').style.left='0px'}" onmouseout="{document.getElementById('test').style.opacity='0';document.getElementById('icon1').style.left='-45px'}" src="http://cdn4.iconfinder.com/data/icons/picnic/Facebook1.png" style="position:relative;left:-2px;" width=37px />
<font id="icon1" style="position:relative;left:-45px;-webkit-transition:all 0.7s ease;"><span class="icon0" id="test" style="-webkit-transition:opacity 0.3s ease;position:relative;top:-15px;">World Dezign</span></font></a></li>

Because WD is the most special site we have seen. Razz

maybe : WD iz one of the best they have seen so far :p

Lol Happy well.. does the code worked for u?
sean.. have du seen better Razz lol ;D

Lol... Okay I need some more assistance now. I am so confused. ._. I have pasted some codes from the other thread that I wanted the navigation bar on the left. Now when I paste this code after it, I receive two pictures. Hehe... I need a step by step on how to do something similar as yours on the left? (:

its not that easy to explain... i gave you the code above.. (:

lol okay, this is what I have. Razz

Code:
<div id="sidenav"><div style="position: fixed; left: 0px; right: 95%; bottom:0; top: 40%; margin: 0 auto; vertical-align:center;"><a href="http://dynamicca.forumotion.com/forums"><img src="http://i64.servimg.com/u/f64/15/94/31/53/httpi612.jpg" width="50" height="50"/></a></div>

<style>
.icon0 {font:10px verdana;position:relative;left:-4px;top:-19px;padding:2px 3px 4px;width:50px;
background: rgba(0,0,0,0.88);color:white;opacity:0;z-index:-1;margin-left:6px;white-space:no-wrap;text-wrap:none;}
.icon0:hover {opacity:0 !important;cursor:default;
</style><div style="position:fixed;left:0px;right:auto;bottom:0px;top:25px;margin:auto 0;vertical-align:center;padding:20px 1px;heig-t:300px;height:180px;width:150px;vertical-align:middle;}">

<li style="list-style:none;"><a href="#" style="text-decoration:none;cursor:default;"><img onmouseover="{document.getElementById('test').style.opacity='1';document.getElementById('icon1').style.left='0px'}" onmouseout="{document.getElementById('test').style.opacity='0';document.getElementById('icon1').style.left='-45px'}" src="http://i64.servimg.com/u/f64/15/94/31/53/httpi612.jpg" style="position:relative;left:-2px;" width=37px />
<font id="icon1" style="position:relative;left:-45px;-webkit-transition:all 0.7s ease;"><span class="icon0" id="test" style="-webkit-transition:opacity 0.3s ease;position:relative;top:-15px;">World Dezign</span></font></a></li>

Not sure what to do now. Razz If you can explain to me how to do one of the icons, I can do the rest. =D

Don't edit anything in the code... only the link and the icon or it will not work:

Code:
<style>
.icon1 {font:10px verdana;position:relative;left:-4px;top:-19px;padding:2px 3px 4px;width:50px;
background: rgba(0,0,0,0.88);color:white;opacity:0;z-index:-1;margin-left:6px;white-space:no-wrap;text-wrap:none;}
.icon1:hover {opacity:0 !important;cursor:default;
</style><div style="position:fixed;left:0px;right:auto;bottom:0px;top:25px;margin:auto 0;vertical-align:center;padding:20px 1px;heig-t:300px;height:180px;width:150px;vertical-align:middle;}">

<li style="list-style:none;"><a href="World Dezign - Link" style="text-decoration:none;cursor:default;"><img onmouseover="{document.getElementById('test').style.opacity='1';document.getElementById('icon1').style.left='0px'}" onmouseout="{document.getElementById('test').style.opacity='0';document.getElementById('icon1').style.left='-45px'}" src="http://i64.servimg.com/u/f64/15/94/31/53/httpi612.jpg" style="position:relative;left:-2px;" width=37px />
<font id="icon1" style="position:relative;left:-45px;-webkit-transition:all 0.7s ease;"><span class="icon1" id="test" style="-webkit-transition:opacity 0.3s ease;position:relative;top:-15px;">World Dezign</span></font></a></li>

To change the link of it look for "World Dezign - Link" and the text "World Dezign" the icon you already changed..
if you want to make another icon.. copy the code above and paste it then edit "test" to "test" or what ever, in all the codes.. and change "icon1" to "icon2" then copy the CSS code above and paste then change it to the same names (:
Hope you will understand my language Razz

Gotcha! Time to experiment! >.<

[code]

Hi Vici-!

It seems as if that code was a little spaced, eh? Please, let me explain for you! Happy
Let's begin giving the CSS a go.


<style type="text/css">

.icon0 {
  font: 10px verdana;
  position:relative;
  left:-4px;
  top:-19px;
  padding:2px 3px 4px;
  width:50px;
  background: rgba(0,0,0,0.88);
  color:white;opacity:0;z-index:-1;margin-left:6px;
  white-space: no-wrap;
  text-wrap:none;
  }

.icon0:hover {
  opacity:1 !important;
  filter: alpha(opacity=100);
  cursor: pointer;
  }
</style>



Paste that into the homepage message, announcements, templates, whatever.. i'd suggest hosting it and make it an meta Wink

Now run to the homepage message and paste in this:


<li style="list-style:none;"><a href="World Dezign - Link" style="text-decoration:none;cursor:default;"><img onmouseover="{document.getElementById('test').style.opacity='1';document.getElementById('icon1').style.left='0px'}" onmouseout="{document.getElementById('test').style.opacity='0';document.getElementById('icon1').style.left='-45px'}" src="https://i.servimg.com/u/f64/15/94/31/53/httpi612.jpg" style="position:relative;left:-2px;" width=37px />
<font id="icon1" style="position:relative;left:-45px;-webkit-transition:all 0.7s ease;"><span class="icon1" id="test" style="-webkit-transition:opacity 0.3s ease;position:relative;top:-15px;">World Dezign</span></font></a></li>



If this doesn't work, please wrap
    tags around the whole HTML part of the code Wink


    Thank you for choosing World - Dezign! Happy



    Thank-you Sir Evil! :]

    Since no reply has been posted by the thread author,and a possible solution has been posted by one of our technicians,i will now lock this thread and mark it as solved.