how to make my title hover thing
It’s just a load of css basically. Put this in above your style tags so you can set the pictures in the appearance tab (title is the normal one and title2 is the one you see when you hover) -
<meta name="image:Title" content=""/>
<meta name="image:Title2" content=""/>
In your html put this (set the size of the rollover pic, which will end up as the size of the overall hover thing) -
<div id="title"><a href="/">
<img src="{image:Title2}" width="???" height="??" border="0"
alt="" /></a>
</div>
And then put all of this in the tags -
div#title {
background-image: url('{image:Title}');
background-repeat: no-repeat;
}
div#title img {
opacity: 0;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-transition: opacity 0.8s ease-out;
-moz-transition: opacity 0.8s ease-out;
transition: opacity 0.8s ease-out;
}
div#title img:hover {
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}
I don’t know how good you are with css or anything but that’s basically saying you have a div with a set background (the one you see when you’re not hovering over it) and then the image in it is transparent, but the opacity changes when you hover over the link. 0.8s works for me but you can make it slower/faster. Oh and it also helps if you’re hover image is a .png because they can have partially transparent backgrounds. I hope this makes sense :) x
