Creating blurred PNG image to lay over text link

Question

I have a website where I want the text links in the navigation to be blurred. When the visitor then hover over the text link it becomes clear again.

My idea is to make some kind of blurred image in PNG format to lay over the text link.

I have tried to do that but my Photoshop skills are noobish. I could make one because blurred white doesn't work :s

• How would you create such an image?
• Do you have another solution?

Answer 1

There is no way to create a (semi-)transparent PNG image that will blur whatever it overlays. It just can't be done. If you really need a dynamic website so you can easily change the text, I'd recommend using a PHP script like below to blur an image. It comes from here. You could use another PHP script to generate the text image.

Result:

<?php
function blur (&$image) {
    $imagex = imagesx($image);
    $imagey = imagesy($image);
    $dist = 2;

    for ($x = 0; $x < $imagex; ++$x) {
        for ($y = 0; $y < $imagey; ++$y) {
            $newr = 0;
            $newg = 0;
            $newb = 0;
            $colours = array();
            $thiscol = imagecolorat($image, $x, $y);
            for ($k = $x - $dist; $k <= $x + $dist; ++$k) {
                for ($l = $y - $dist; $l <= $y + $dist; ++$l) {
                    if ($k < 0) { $colours[] = $thiscol; continue; }
                    if ($k >= $imagex) { $colours[] = $thiscol; continue; }
                    if ($l < 0) { $colours[] = $thiscol; continue; }
                    if ($l >= $imagey) { $colours[] = $thiscol; continue; }
                    $colours[] = imagecolorat($image, $k, $l);
                }
            }

            foreach($colours as $colour) {
                $newr += ($colour >> 16) & 0xFF;
                $newg += ($colour >> 8) & 0xFF;
                $newb += $colour & 0xFF;
            }
            $numelements = count($colours);
            $newr /= $numelements;
            $newg /= $numelements;
            $newb /= $numelements;
            $newcol = imagecolorallocate($image, $newr, $newg, $newb);
            imagesetpixel($image, $x, $y, $newcol);
        }
    }
}
    echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
    $im = imagecreatefromjpeg("blurimg.jpg");
    blur($im);
    imagejpeg($im, "blurimg2.jpg");
    echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
    imagedestroy($im);
?> 

Answer 2

What I would do here is create the text button and then use a filter or effect in Infranview (Freeware, AFIAK, Windows only) to save a copy with the effect overlaied, so you'd have image1.png and image1blurred.png (as an example). Then you'd create a roll-over effect so the burred is shown all the time unless you roll-over it.

Also, >why< would you want to do this?

Answer 3

You should be able to do a fill of solid white and set the layer transparency to less than 100%.