Thumbnail image hover ?

[s1procam]

Hope someone can help ! I have gotten the hover I wanted around my thumbnails but, it moves the images around page slightly when its hovering. Also the hover blanks out the image title below it.
Take a look: http://www.pbase.com/s1procam

Thanks for any feedback !
John[/url]

[ilanphoto]

The simple answer is that you have to define the same box / frame with the background colour in all other "link" properties as well only the colour should change in the hover definition.
something like this code will do it

Code: Select all

/* these control the box around the thumb not the thumb itself   cause a highkight affect */
a.thumbnail,
a.thumbnail:link,
a.thumbnail:visited,
a.thumbnail:active
  {
   margin-bottom: 1px;
   padding-top: 2px;
   padding-bottom: 2px;
   display: block;
   color: white;
   background: #D2CFC7;
   width: 185px;
   height: 170px;
  }

a.thumbnail:hover
  {
   margin-bottom: 1px;
   padding-top: 2px;
   padding-bottom: 2px;
   display: block;
   color: white;
   background: gray;
   width: 185px;
   height: 170px;
  }
/* end of high light affect */

Hope that helps
Ilan

[s1procam]

Hi llan,
Thanks for your quick response. Being relatively new to all this I wonder now with your info where would this be placed ? I appreciate your time !

Thanks !
~ John ~


/*================= BODY ==============================*/
body{ background: rgb(35, 32, 41);
padding: 6px;
display: block;
width: 97%;
color: #912F89;
font: 18px Verdana, Tahoma, Helvetica;
letter-spacing: 0px;
background-repeat: repeat;
background-attachment: scroll;
background-image: url(
http://mikoga.image.pbase.com/u39/matty ... y_tint.jpg );
}

/*================ LINKS ================================*/
a,b,a:link,a:active{
color: #912F89;
font-face: Verdana, Tahoma;
font-size: 15px;
font-weight: normal;}
a:visited{ color: #912F89;}
a:hover { color: #F45CE7;}



/*==================== Main Title ============================*/
/*h2:first-letter {
text-transform: lowercase;
font-size: 30px;
font-variant: normal;
font-style: normal; }*/

h2 { width: 100%;
/*font-variant: normal ;*/
line-height: 60px;
font-size: 35px;
font-style: italic;
font-weight: bold;
text-align: Center;
font-face: Arial;
position: relative;
color: #912F89;
filter:progid:DXImageTransform.Microsoft.Glow(
color=#0044dd, strength=2),
progid:DXImageTransform.Microsoft.Shadow(
color=#222222, Direction=155,Strength=5);
}

/*================= Main Text Description ====================*/
div.galleryheader{
width: 100%;
font-height: 24px;
text-align: left;
position: relative;
color: #912F89;
filter:glow( color=#001122, strength=1),
progid:DXImageTransform.Microsoft.Shadow(
color=#333333, Direction=155, Strength=3);
}

/*============= Thumbnail Titles =================*/
td.thumbnail {
font-height: 35px;
text-align: center;
color: #912F89;
filter:progid:DXImageTransform.Microsoft.Shadow(
color=#000000, Direction=155, Strength=3);
}
}
a.td.thumbnail:hover {
border: rgb(165, 54, 156) 1px solid;
margin-bottom: -45px;
padding-top: 5px;
width: 172px;
display: block;
background: rgb(32, 32, 32);
height: 197px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
/*================ Thumbnail Images ====================*/
img.thumbnail {
border: 18px outset #666688;
filter:progid:DXImageTransform.Microsoft.Shadow(
color=#111111,Direction=155,Strength=3);
}

/*====================== Comments ====================*/
td.message_body{
padding: 8px;
border: 2px outset #666688;
filter: progid:DXImageTransform.Microsoft.Shadow(
color=#111111,Direction=155,Strength=3);
display: block;
background-repeat: repeat;
background-attachment: fixed;
background-image: url(
http://mikopi.image.pbase.com/u39/matty ... mpton1.jpg);
}
p.message_body {
margin: 2px 2px 2px 2px;
font: 14px #FFOOFF Verdana, Tahoma, Helvetica;
}

/*================ Full Photo ====================*/
img.display {
border: 16px outset #666688;
filter:progid:DXImageTransform.Microsoft.Shadow(
color=#111111,Direction=155,Strength=6);
}

/*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz*/
/*----------------- END OF CSS ------------------*/
/*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz*/

[ilanphoto]

All this must be placed in a CSS
IN the gallery edit next to the CSS drop down selection box there is a link to "edit style sheets"
Click that - create a new style sheet and paste all of this into it
connect a gallery to it and see the results.

All my CSS work I learnt on Pbase from the forums and looking at others so it is possible to do

HTH
Ilan