Subscribe to Collegiate Chronicles        RSS Feed
-----

Mouse-over Text Effect #1

Icon Leave Comment
This technique is pretty simple, but I love the effect and thought I'd share it. You can see the final product here.

Here's the code to accomplish the look:

CSS:
body {
background-color:#FFFFFF;
color:#000000;
margin:20px;
text-align:left;
}

#wrapper		 
	{position: absolute;
	 top: 50%;
	 left: 0px;
	 width: 25%;
	 height: 1px;}

#content
	{margin-left: 0px;
		 position: absolute;
	 top: -200px;
	 left: 50%;
	 width: 700px;
	 height: 300px}

.bgtext 					
	{font-size: 100px;
	 position:absolute;
	 top:120px;
	 left:0px;
	 color:#1d243a;
	 font-family:verdana, helvetica, sans serif;}

div#link1, div#link2, div#link3, div#link4
		 {color:#767f9a;
		  font-family:verdana, helvetica, sans serif;
		  position:absolute;}

div#link1 {font-size:40px;
		top:75px;
		left:100px;}
		
div#link2 {font-size:50px;
		top:25px;
		left:300px;}
				
div#link3 {font-size:30px;
		top:275px;
		left:50px;}
			
div#link4 {font-size:60px;
		top:275px;
		left:250px;}

div#content a span {display: none;}

div#content a {text-decoration: none;
		 color:#767f9a;}

div#content a:hover span {display: block;
			position:relative;
			background:none;
			font-size:14px}
			 
div#urltext, div#content a:link
			{color:#767f9a;}

div#content a:visited, div#content a:hover, div#content a:hover span
   			 {color:#a4abc1}


HTML:
<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="content">
	<div class="bgtext">Page Title</div>		
<div id="link1"><a href="#">Link 1<span> Extra text</span></a></div>

<div id="link2"><a href="#">Link 2<span> More extra text</span></a></div>

<div id="link3"><a href="#">Link 3<span> Extra text again</span></a></div>

<div id="link4"><a href="#">Link 4<span> Last time, more text</span></a></div>			
			
	</div>
  </div>
</div>
</body>
</html>


I use a slightly modified version of this technique on my personal site, you can check it out here if you want.

0 Comments On This Entry

 

December 2019

S M T W T F S
1234567
8910111213 14
15161718192021
22232425262728
293031    

Recent Entries

Recent Comments

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)