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:
#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) .............
/* 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;
}