Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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?
share|improve this question

3 Answers 3

up vote 3 down vote accepted

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:

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);
?> 
share|improve this answer

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?

share|improve this answer
    
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. –  Cudos Jan 18 '11 at 12:48
    
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. –  tombull89 Jan 18 '11 at 13:00

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.