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?

Solution

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);
?> 

Comments

[Cudos]

Some fancy graphic effect, customers wish. Since I'm using a CMS then making an image set for every change to the website is cumbersome.

[tombull89]

Ok I realise then making images is not ideal. I imagine you would like to have some sort of semi-transparent overlay but I wouldn't be able to help with that, sorry.