CSS rollover image with text

Forum Moderators: not2easy

Message Too Old, No Replies

CSS rollover image with text

DonK

2:58 am on Mar 22, 2011 (gmt 0)

Dear forum,

I have a client who wants to have several photos with a rollover for each photo and different text displayed at a partiular location away from the photo. Once you rolloff the photo the text disappears.

In the past I would have used a javascript for the rollover using Dreamweaver. But trying to get different text to display at the same time and location has been a challenge. I thought I would try doing it in CSS, which I have some experience in. I have some CSS code that I have modified that gets me close but no cigar.

I would appreciate some help. I'm in the middle of the design so I don't have much time to experiment.

Thanks ahead of time.

Leosghost

3:14 am on Mar 22, 2011 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] DonK :)

I have some CSS code that I have modified that gets me close but no cigar.

You'll get help from all the resident CSS experts ..but everyone ( expert or not ) likes to see the code you already have ..useful for others reading.

DonK

3:38 am on Mar 22, 2011 (gmt 0)

Leosghost,

Thanks for the advice. I should have done that to start with. The code below I have attached allows you to rollover the photo and text for each photo displays at the bottom in the same location. What I would like is to have the photo rollover to a colored version of the photo.

I tried copying and pasting the CSS code but got an Style Code tags error. Not sure what that means. Your system would let me send it therefore I imcluded the Web Site page below.

You can view the test site home page here.

[edited by: alt131 at 2:46 pm (utc) on May 31, 2011]
[edit reason] Thread Tidy - 404 [/edit]

Leosghost

3:49 am on Mar 22, 2011 (gmt 0)

Ok ..mod or admin will probably remove the link you gave ( reason being when you get a "solution" , you'll update your page, and no-one will know how it was before it was "solved" so late comers won't learn..that's how it works here ..most of the time ;-) ( and mod or admin will tidy up my "help" ..sorry guys it's 05.00am where I am ..may have missed some ID or other stuff ? ;-) ....but I took your CSS and html ..I unlinked the dynamicdrive

Here it is

CSS ( inline)

<style type="text/css">
body {
background-color: #E8E4D8;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: ://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin-right: 10px;
margin-left: 10px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
visibility: hidden;
color: #666666;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
font-weight: normal;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
left: 438px; /*position where enlarged image should offset horizontally */
z-index: 50;
top: 388px;
}
</style>

Partial html ( body) to (/body) here ( CSS is inline on the original page )
<body>
<p> </p>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="8" style="text-align: center"><p> </p>
<div class="gallerycontainer">
<a class="thumbnail" href="Residential_Index.htm"><img src="assets/Residential/54_W_Terrace/MSD050608_54WTerrace_FamRm-01BW_280x325.jpg" width="280" height="325" border="0" /><span>RESIDENTIAL</span></a>

<a class="thumbnail" href="Home_Staging_Index.htm"><img src="assets/Home_Staging/Pagewood/Pagewood-5337BW-24_280x325.jpg" width="280" height="325" border="0" /><span>HOME STAGING</span></a>

<a class="thumbnail" href="Commercial_Index.htm"><img src="assets/Commercial/La_Toretta_Blvd_Golf_Spa_Resort/MSD081208_LaTorettaSpaBW_280x325.jpg" width="280" height="325" border="0" /><span>COMMERCIAL</span></a></div></td>
</tr>
<tr>
<td width="45"> </td>
<td height="65" colspan="6" valign="middle" style="text-align: center"><img src="assets/logo-home_a.jpg" alt="logo" width="354" height="56" hspace="65"></td>
<td width="42"> </td>
</tr>
<tr>
<td> </td>
<td height="15" colspan="6" valign="top" style="text-align: center; font-family: Tahoma, Geneva, sans-serif; font-size: 18px; color: #666666;"> </td>
<td> </td>
</tr>
<tr>
<td height="40" colspan="8"><hr></td>
</tr>
<tr>
<td> </td>
<td colspan="6" style="text-align: center"><table width="850" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14%" style="text-align: center"><img src="assets/ghbaimages_100x100.jpg" width="100" height="100" alt="Award"></td>
<td width="20%" style="text-align: left"><span style="text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666666;">2009 BEST AWARDS<br>
GHBA DEGIGN</span></td>
<td width="15%" style="text-align: center"><img src="assets/HGTV_LOGO_1_109x55.jpg" width="109" height="55" alt="HGTV"></td>
<td width="18%" style="text-align: left"><span style="text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666666;">HGTV DESIGN STAR<br>
RUNNER UP
</span></td>
<td width="19%" style="text-align: center"><img src="assets/iida_logo_1_131x70.jpg" width="109" height="57" alt="InteriorDesign"></td>
<td width="14%" style="text-align: left"><span style="text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666666;">INTERIOR DESIGN<br>
PROFESSIONAL<br>
ORGANIZATION</span></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
</body>

@mod or admins ..delete/tidy "whatever" to make it coherent ..including my "comments" I'm going to get some sleep ..someone will be along "bright eyed" and awake soon ( ish ) to help you DonK ;-)

HTH :)

DonK

4:03 am on Mar 22, 2011 (gmt 0)

Leosghost,

Thanks I appreciate it. I wasn't sure why your system wouldn't let me send the code?

Leosghost

4:12 am on Mar 22, 2011 (gmt 0)

"style codes" are explained in the link "style codes are on" just to the left at the top of the posting input box when you are in "preview" mode before posting. :)

alt131

11:50 am on Mar 22, 2011 (gmt 0)

Hi DonK, and welcome to WebmasterWorld :)

@leosghost, not the expert you are referring to, but thanks for bringing the code back ;)

@DonK, many variations on ways to do this - but none require javascript. You haven't said which browser/versions you need to support, but the two methods in the example should work in most browsers, and can be modified to suit as required.

First, the images are in a list that can be put inside the td without requiring div.gallerycontainer (you can also remove the inline style for the td as well).

Then remove the images from the html and use css to set them as a background-image on the <a>. This is the easy method of changing the image on hover - or what Dreamweaver used to call "image swaps on onmouseover" (maybe still does).

The example gives two ways to change the image on :hover. The first starts with the "black and white" image, and "swaps" in the "coloured" version when the original image is hovered.

The second is a variation of the "sprites" technique. In your graphics programme create a large image with the original (black/white) image, and the coloured version side-by-side. Set that image as the background-image so the black/white "version" is visible. On hover shift the background-image to the left so the coloured "version" is visible. This reduces the number of calls to the server as there is only one image - unless the image is really large (in which case the first method may be better.)

<style type="text/css">
ul {
width: 920px;
height: 325px;
margin: 0;
padding: 0;
/*centre the ul*/
margin: 0 auto;
list-style-type: none;
/* The absolutely positioned spans will take their position from this relatively positioned parent*/
position:relative;
}

li {
/*get the li's horizontal and evenly laid out */
float: left;
margin: 0 10px;
}

a {
/*make a container to hold the images */
display: block;
/*height and width the size of the image you want displayed */
width: 280px;
height: 325px;
border: 1px solid white;
color: #666666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
/*remove underline*/
text-decoration:none;
}

a:hover {border: 1px solid blue;}

/* The image "swaps" */
/* Method One - */
a.thumbnail-1 {background-image: url(blackandwhite-1.jpg); }
a.thumbnail-2 {background-image: url(blackandwhite-2.jpg);}
a.thumbnail-3 {background-image: url(blackandwhite-3.jpg);}

a.thumbnail-1:hover {background-image: url(coloured-1.jpg);}
a.thumbnail-2:hover {background-image: url(coloured-2.jpg);}
a.thumbnail-3:hover {background-image: url(coloured-3.jpg);}
*/

/*Method two*/
/*
a.thumbnail-1 {background-image: url(bothversions-1.jpg); }
a.thumbnail-2 {background-image: url(bothversions-2.jpg); }
a.thumbnail-3 {background-image: url(bothversions-3.jpg);}

a:hover {background-position: 280px; }
*/

/* The span */
a span {
position: absolute;
visibility:hidden;
}

/* To centre the text in the span give the span a width (this is the same as the ul) then align the text in the centre of the span. Note do this on the hover rather than the span itself to avoid it "overlaying" other elements when hidden*/
a:hover span {
width:920px;
text-align: center;
left:0;
top:380px;
visibility:visible;
z-index: 50;
}

</style>
</head>
<body>
<ul>
<li> <a class="thumbnail-1" href="Residential_Index.htm"><span>RESIDENTIAL</span></a> </li>
<li><a class="thumbnail-2" href="Home_Staging_Index.htm"><span>HOME STAGING</span></a> </li>
<li><a class="thumbnail-3" href="Commercial_Index.htm"><span>COMMERCIAL</span></a></li>
</ul>

Leosghost

12:21 pm on Mar 22, 2011 (gmt 0)

Actually you definitely were in the 4 or 5 I had in mind when I was referring to "experts" ;-)

DonK

2:44 pm on Mar 22, 2011 (gmt 0)

Dear alt131,

Thanks so much for taking the time to detail out the two optional code methods. I'm not familiar with the (2) methods so I will take the code and see how it works for me.

I have not done alot in CSS except in NAVs but in Javascript, html and tables. If I have the CSS or Javascript code I know how to change it but not custom design with it yet. I use a 3th party Project Seven for NAV buttons, which is all in CSS. I can change up the CSS codes to color custimize the NAV per client.

Again thanks to alt131 and Leoshost for taking your valuable time to help the beginners out here. I know how that is I'm a teacher of many graphic, Web Site and video programs and help my clients get up on the curve to accomplish their projects. The times keep changing and it's a constant challenge to keep up. But everyone can do with some help form time to time. Thanks a million.

Leosghost

3:36 pm on Mar 22, 2011 (gmt 0)

<aside>Here ..Its an exchange , enlightened self interest , or brainstorming or whatever ..your graphics and video knowledge will be useful here too..especially if you've had experience teaching ;-) ( lots of folks "know how" nowhere near as many can "get it across" in "simple easy to understand words and style"..

Don't forget to visit and join in in foo ( a digital "cousin" here once said ..a long time ago that foo was the heart of this place ..IMO he was correct ;-) ..plus .If you work on the web most people don't understand more half of what you do, and just "glaze over" at some of your references and things that strike you or seem funny to you ..( different points of reference )..foo is good ..kindred spirits and minds ..who "get" the references;-)</aside>

alt131

12:58 pm on Mar 25, 2011 (gmt 0)

Hi DonK, thanks for the response - and hope the lack of posts since means one of those methods got you to a working solution.

I strongly second Leosghosts "aside" and reasons for joining in - and that includes css even if you haven't done as much. As a teacher you're already aware how people frequently underestimate what they know - and the value of having lots of different perspectives when asking for assistance or ideas. Plus, always interesting to see what is happening around the web - which helps "keep up" as well.

@leosghost: as ever, you are very kind.