Kind of cool CSS effect

RJM62

RJM62

Touchdown! Greaser!
Joined
Jun 15, 2007
Messages
13,157
Location
Upstate New York
Display Name
Display name:
Geek on the Hill
I took over this site several years ago. It was a low-budget re-write. The client liked the design, but it was utterly invisible to search engines because the original designer used some homegrown nav scripts that search engines found incomprehensible.

I basically cleaned up the nav links and cleaned up the worst of the code when I took it over, and now he gets about 400 unique visitors a day and is in the top three on Google on almost all relevant searches. But the ugly code has always bothered me, so I want to do another rewrite.

So I was playing with ideas for the animal galleries (the present ones are horrid), and this is what I came up with:

http://www.ridacritter.com/newsite/demo_gallery.html

Nothing earth-shattering, but kinda neat, especially because it's all CSS. Still needs some fine-tuning, but I do like the effect and that fact that there's no JS.

Here's the relevant CSS:

Code: 
#gallery {
    position: relative;
    margin-left: 0;
    width: 95%;
    display: inline-table;
    font-size: 9px;
}

#gallery li {
    display: inline;
    float: left;
    width: 100px;
    height: 160px;
    margin: 7px;
    text-align: center;
}

#gallery li:hover p {
    visibility: hidden;
}

#gallery img:hover {
    border: #000000 1px solid;
    height: 150px; width: auto;
    position: relative;
    bottom: 40px;
    right: 45px;
    z-index: 2;
}

#gallery img {
    z-index: 1;
    height: 75px; width: auto;
}

#gallery li p {
    text-align: center;
    margin:10px 0;
    width: 100px;
}
and my working HTML (I'll probably wind up using PHP, but this is my sandbox stuff):

HTML: 
<div id="gallery">
      <ul>
        <li> <a href="Images/squirrels/2_caught_grey_squirrels.jpg" target="_blank"><img src="Images/squirrels/thumbs/2_caught_grey_squirrels.jpg" alt="" width="200" height="150" border="0"/></a>
          <p align="center">Sample caption, created entirely with CSS. </p>
        </li>
        <li><img src="Images/squirrels/thumbs/3_young_squirrels.jpg" height="150" width="200" alt=""/>
          <p>There are no tables or td's, so the pages are lighter, </p>
        </li>
        <li><img src="Images/squirrels/thumbs/albino_squirrel.jpg" height="150" width="200" alt=""/>
          <p>And the content density is higher, </p>
        </li>
        <li><img src="Images/squirrels/thumbs/atlanta1.jpg" height="75" width="100" alt=""/>
          <p>which should result in higher keyword density. </p>
        </li>
        <li><img src="Images/squirrels/thumbs/baby_squirrel.jpg" height="75" width="100" alt=""/>
          <p>Notice that the gallery rearranges itself </p>
        </li>
        <li><img src="Images/squirrels/thumbs/Damaged_electrical_wires_Decatur.jpg" height="75" width="100" alt=""/>
          <p>when the page is resized. </p>
        </li>
        <li><img src="Images/squirrels/thumbs/columbus1.jpg" height="100" width="75" alt=""/>
          <p>Caption </p>
        </li>
        <li><img src="Images/squirrels/thumbs/columbus02.jpg" height="150" width="200" alt=""/>
          <p>Caption</p>
        </li>
        <li><img src="Images/squirrels/thumbs/squirrel008.jpg" height="150" width="200" alt=""/>
          <p>Caption</p>
        </li>
        <li><img src="Images/squirrels/thumbs/creative_ladder_work.jpg" height="150" width="200" alt=""/>
          <p>Caption</p>
        </li>
        <li><img src="Images/squirrels/thumbs/squirrel_exclusion_McDonough_med.jpg" height="150" width="200" alt=""/>
          <p>Caption</p>
        </li>
        <li><img src="Images/squirrels/thumbs/young_grey_squirrel_attic.jpg" height="150" width="200" alt=""/>
          <p>Caption</p>
        </li>
      </ul>
    </div>
    <p>&nbsp;</p>
  </div>
Like I said, nothing earth-shattering; probably a million people have done it before. I just thought it was a nice, lightweight CSS effect that draws the mouse and the eye pretty well. Some of the CSS probably is superfluous; but I've worked enough for one day. I'll tweak in the morning.

Good night, all.

-Rich
 
Last edited:
Here's a database-driven PHP version that uses CSS to generate the hover effect, and JS to generate the popup window when clicked.

http://www.ridacritter.com/newsite/gallery.php

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="Styles/newsite.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript" src="Scripts/openWin.js"></script>
</head>
<div id="content_wrapper">
<div id="right_column">
<div id="gallery" align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul>
<?php
$username="(hidden)";
$password="(hidden)";
$database="(hidden)";

mysql_connect(localhost,$username,$password);
mysql_select_db($database) or die( "Unable to select database");

$query="SELECT * FROM img_list ";
$result=mysql_query($query);

$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
    $thumb=mysql_result($result,$i,"thumb");
    $full_size=mysql_result($result,$i,"full_size");
    $caption=mysql_result($result,$i,"caption");
    print "<li><a href=\"javascript:CloseUp('" . $full_size . "')\"><img src=\"" . $thumb . "\" alt=\"alt\" border=\"0\>\"" . "</a>";
    print "<p>" . $caption . "</p></li>";
    $i++;
}

mysql_close();
?>
</ul>
</div>
</div>
</div>
</html>
Of course, the HTML is just in there to make this work free-standing. It will be referenced via an include on the final site.

Simple stuff, but fun.

-Rich
 
jesse said:
If I click on a picture I want to see it bigger. The ones in that first example are just too small.

The popup on the second was kind of awkward for me in Firefox. Take a look at how this works:
http://www.gastonsflyin.com/viewgallery.php?id=17
Click to expand...

Thanks, Jesse. That's pretty awesome.

I wonder, though, if the client will mind that it obscures the text on the pages... He's a little picky about that, which is why I went to the pop-up window.

Maybe the center window version would work for him. It sure is a lot prettier than my old pop-up window.

The pop-up script I used was adapted from one that was making its rounds around the Web design forums years ago. But different browsers handle images differently and throw the dimensions off, so I've put some some code in there over the years to compensate. But yeah, it's a kludge. It works acceptably on most browsers, but doesn't work perfectly on any of them.

I wrote a PHP version that's a little smoother, but it stopped working on Safari and I haven't had the time to fix it.

By the way, the first example was just of the hover effect using only CSS. Only one of the thumbnails was actually linked to a big pic.

Thanks again for your input. You know I value it.

-Rich
 
Okay, Jesse, I worked that into my script. I decided to keep the hover preview for the time being, as well. It would be nice if I could get the hover image to fade in to keep the effect consistent... I used to know how to do that with CSS. I'll have to dig through my notes.

Here's another sample page, now with the greybox effect installed:

http://www.ridacritter.com/newsite/

(That might be down from time to time as I diddle with things, just to let ya know.)

Thanks again, Jesse. Your help is always appreciated.

-Rich
 
Here's the slightly revised code, by the way.

The PHP:

PHP: 
<div id="gallery">
(Roll mouse over thumbnails for preview; click to see full-size.)
<p>&nbsp;</p>
<ul>
<?php
$username="(hidden)";
$password="(hidden)";
$database="(hidden)";

mysql_connect(localhost,$username,$password);
mysql_select_db($database) or die( "Unable to select database");

$query="SELECT * FROM img_list WHERE page_name='$page'";
$result=mysql_query($query);

$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
    $thumb=mysql_result($result,$i,"thumb");
    $full_size=mysql_result($result,$i,"full_size");
    $caption=mysql_result($result,$i,"caption");
    print "<li><a href=\"" . $full_size . "\" rel=\"gb_image[]\"><img src=\"" . $thumb . "\" alt=\"alt\" border=\"0\"></a>";
    print "<p>" . $caption . "</p></li>";
    $i++;
}
mysql_close();
?>
</ul>
</div>
The CSS:

Code: 
#gallery {
    position: relative;
    margin-left: 0;
    width: 95%;
    display: inline-table;
    font-size: 9px;
}

#gallery a {
    border: none;
    text-decoration: none
}

#gallery li {
    display: inline;
    float: left;
    width: 100px;
    height: 160px;
    margin: 7px;
    text-align: center;
}

#gallery li:hover p {
    visibility: hidden;
    border: none;
}

#gallery img:hover {
    height: 150px; width: auto;
    border: #000000 1px solid;
    position: relative;
    bottom: 40px;
    right: 45px;
    z-index: 2;
}

#gallery img {
    z-index: 1;
    height: 75px; width: auto;
}

#gallery li p {
    text-align: center;
    margin:10px 0;
    width: 100px;
}
Still have to add the ALT and TITLE tags to the DB.

-Rich
 
Last edited:
I prefer how images work here on the forums: after you click on an image to enlarge it, you can roll the mouse wheel and the image window closes.
 
You must log in or register to reply here.
Back
Top