Jump to content

Css Image Rolling Over But Text Still Showing


Dareus
 Share

Recommended Posts

I'll put the css code with the html. It is very small as I'm trying something out.Basically I am trying to figure out why this doesnt work.I have it so basically it shows a Home button, On hover it shows a 40% opaced, home button with a line leading towards the main page, (almost like the look of a thought bubble), then once clicked on, it becoms a solid not the opaced version.The site can be seen at www.conceptmontreal.com/home/home.htmlThe image is that large, but this is all a test right now, I'm working on some ideas and a background etc,

<style type="text/css"><!--body {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 12px;	line-height: 1.3em;	color: #FFF;	text-decoration: none;	background-color: #030;	margin: auto;	width: 900px;}.headertoprow {	background-image: url(../pics/logomain1.png);	background-repeat: no-repeat;	height: 60px;	text-indent: -9999px;	background-position: 10px;}.linkrow  {	white-space: nowrap;	margin: auto;}.linkrow li {	display: inline;}a.home:link {	text-indent: -9999px;	background-image: url(../pics/homebefore.png);	   }a.home:hover {	background-image: url(../pics/homehover.png);   }a.home:active {	background-image: url(../pics/homecurrent.png);   }--></style></head><body><div class="headertoprow"><h1>Concept Montreal</h1></div><div>  <img src="../pics/homeheader.jpg" width="900" height="250" alt="through simplicity results are acheived logo" /></div><div class="linkrowheader">  <ul class="linkrow">		<li class="home"><a href="" class="home"><img src="../pics/homebefore.png" />Home</a></li>		<li>Portfolio</li>		<li>SEO</li>		<li>FAQ</li>		<li>Fee's</li>		<li>Contact Us</li>	</ul></div></body></html>

Link to comment
Share on other sites

You might want to add

a.home {  display: inline-block;  width: 100px;  height: 40px;}

Making width and height the actual proportions of the image you're using.Also, if the image to load is large, you'll have to wait a few with the mouse over the button to make it appear.

Link to comment
Share on other sites

Thanks again Forgot to put the image width and height.Also I am going to go with a method I seen an example on where they make the rollovers all one image, and as you roll over it say goes -xx px and you make the span text hidden.Working on it :) lol

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...