Image hover inset/outset effect ???

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 397,786 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,405 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2714 | Replies: 1 | Solved

•

Join Date: Jan 2006

Location: Land of Hope & Glory

Posts: 88

Reputation: j4mes_bond25 is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

j4mes_bond25 j4mes_bond25 is offline

Offline

Junior Poster in Training

Image hover inset/outset effect ???

May 7th, 2006

I wonder if someone could possibly enlighten towards image inset/outset effect.

The image is fixed now & it works perfectly well.

I'm just working on the very front "index.html" page.

I know I'm making a rather simple mistake here, but until I know what is it, it would be hard to get it working.

I'm trying to get "border: outset" on an image, which once "hover" should change to "border:inset", so it looks like the image has been pushed down (if you catch my drift).

What I also wanted was a text "Click to Enter" UNDERNEAT this image, perhaps with little change in colour or transform to uppercase, when someone hovers over the "image".

This means when someone hovers the mouse over, image should change to "inset" and "Click to Enter" text should change colour and "transform to uppercase".

So far my CSS code is:

Help with Code Tags

(Toggle Plain Text)

#indexPage img
{
border:thick outset red;
}

#indexPage img a:hover
{
border:thick inset white;
}

and my HTML code is:

<div id="indexPage">
<a href="home.html"><img src="index.jpg"/></a>Click to Enter</a>
</div>

My page can be seen on:

http://uk.geocities.com/darsh2525/

............ENTIRE CSS CODE (if someone wants to see) .............

Help with Code Tags

(Toggle Plain Text)

/* CSS Document */

*
{
margin: 0;
}

body 
{
	background-color:white;
}

#container
{
	height:90%;
	width:99%;
	overflow:hidden;
}

#logo
{
	width:100%;
	height:120px;
	float:none;
	text-align:center;
	overflow:hidden;
}

#topMenu
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	width:100%;
	float:left;
	background-color:black;
	border:1px solid red;
}

#topMenu ul
{
	list-style: none;
	background-color:red;
	font-size:medium;
	float:none;
	position:relative;
}

#topMenu ul li 
{
	display:inline;
	width:130px;
	color:#FF00FF;
	float:left;
	position:relative;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:lime; 
}

#topMenu a:hover
{
	color:blue;
	background-color:white;
	text-transform:uppercase;
}

#content
{
	width:100%;
	height:400px;
}

#contentLeft 
{
	width:300px;
	margin-top:100px;
	float:left;
}

#contentRight 
{
	width:650px;
	height:100%;
	border-left:dotted thin green;
	overflow:auto;
}

#contentRight h1
{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:blue;
	font-size:large;
	text-align:justify;
	margin:30px;
}

#contentRight p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	text-align:justify;
	margin-left:30px;
	margin-top:10px;
}

#content p.first-letter:first-letter
{
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin-left:50px;
	margin-top:20px;
	list-style-image:url(list_icon.gif);
}

#content table
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	margin:30px;
}

#content img.left
{
	float:none;
	padding:0px;
}

.bold 
{
	margin:20px;
	font-weight:bold;
}

#bottomMenu
{
	border:1px solid red;
	float:left;
	height:10px;
	background-color:black;
	font-family:"Times New Roman", Times, serif;
	width:100%;
	color:white;
	text-align:center;
	font-size:medium;
	height:20px;
}

#indexPage img
{
border:thick outset red;
}

#indexPage img a:hover
{
border:thick inset white;
}

/* CSS Document */

*
{
margin: 0;
}

body 
{
	background-color:white;
}

#container
{
	height:90%;
	width:99%;
	overflow:hidden;
}

#logo
{
	width:100%;
	height:120px;
	float:none;
	text-align:center;
	overflow:hidden;
}

#topMenu
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	width:100%;
	float:left;
	background-color:black;
	border:1px solid red;
}

#topMenu ul
{
	list-style: none;
	background-color:red;
	font-size:medium;
	float:none;
	position:relative;
}

#topMenu ul li 
{
	display:inline;
	width:130px;
	color:#FF00FF;
	float:left;
	position:relative;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:lime; 
}

#topMenu a:hover
{
	color:blue;
	background-color:white;
	text-transform:uppercase;
}

#content
{
	width:100%;
	height:400px;
}

#contentLeft 
{
	width:300px;
	margin-top:100px;
	float:left;
}

#contentRight 
{
	width:650px;
	height:100%;
	border-left:dotted thin green;
	overflow:auto;
}

#contentRight h1
{
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:blue;
	font-size:large;
	text-align:justify;
	margin:30px;
}

#contentRight p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	text-align:justify;
	margin-left:30px;
	margin-top:10px;
}

#content p.first-letter:first-letter
{
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin-left:50px;
	margin-top:20px;
	list-style-image:url(list_icon.gif);
}

#content table
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:black;
	font-size:medium;
	margin:30px;
}

#content img.left
{
	float:none;
	padding:0px;
}

.bold 
{
	margin:20px;
	font-weight:bold;
}

#bottomMenu
{
	border:1px solid red;
	float:left;
	height:10px;
	background-color:black;
	font-family:"Times New Roman", Times, serif;
	width:100%;
	color:white;
	text-align:center;
	font-size:medium;
	height:20px;
}

#indexPage img
{
border:thick outset red;
}

#indexPage img a:hover
{
border:thick inset white;
}

Nope, I'm NOT God, but I'm British (which is the next best thing ;)