Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
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.



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");
    imagejpeg($im, "blurimg2.jpg");
    echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .