Create Image Overlay Effects for Your Images Using CSS in WordPress

How to create dazzling image overlay effects with minimal effort.

Web Designer Wall has a posted a great article on adding image overlay effects to your images using CSS. The author does a great job of explaining how this works, so I am only going to explain how to get this working in WordPress.

I just introduced this effect to my category listings pages (archives.php template) - see sample. I have created my own variation of the ‘Tape’ style (even though I removed the tape

Here is what I have done.

1. Read how this technique works at Web Designer Wall
2. Download the sample files from Web Designer Wall
3. First thing I learned is you need to alter / create your own overlay images if your files dimensions differ from those in the downloads. I just opened up FireWorks and modified the tape.png image to the same dimensions as the images on my site. Make sure the images you are applying this effect to all have the same dimensions or your effect will not be applied properly. Extra Note: My layout is probably different than yours, in that I have included my images in the archive.php template in a DIV container with a fixed height of 225px and set overflow:hidden using CSS. The reason I do this is so that all of my thumb images (created using Viva Thumbs) in the left column appear to have the same proportions. The truth is, however, that them images themselves vary in height, though all have the same width of 400px. This overlay technique is even more advantages to me, because I can give my images a finished, polished look, whereas before I could not apply any styling to the bottom of the images because they were longer than the 225px height of its parent DIV, and the bottom effect was always hidden due to the overflow:hidden assignment.
4. Once you have your image created, upload it into your images folder within your active Theme. Note it’s name as you will have to add this to your CSS file (See #6). My image is named tape.png.
5. Open up the decorative-gallery-index.html file in your favorite text editor.
6. Locate the CSS code for your favorite style, and add it to your Theme’s Stylesheet (Style.CSS). Edit the span portion of your CSS to include your image name. Here is the code I am using:.photo {
   margin: 0px;
   position: relative;
   width: 400px;
   height: 225px;
   float: left;
   }
   .photo img {
   background: #fff;
   border: solid 1px #ccc;
   padding: 4px;
   }

   .photo a {
   text-decoration: none;
   }
   .photo span {
   width: 400px;
   height: 250px;
   display: block;
   position: absolute;
   top: 0px;
   left: 5px;
   background: url(images/tape.png) no-repeat;

7. OK. Now we need to make some quick changes to our Template so the image(s) we want to effect receive the CSS styling we’ve prepared. Open up your Theme Editor in WordPress and navigate to your respective file. For me, I opened up the (Archives) Archive.php file. Here is my code, before and after adding the needed code:
   Before:
   <a href=”<?php the_permalink() ?>” rel=”bookmark”><img class=”imgarchive” src=”<?php viva(’template’,”); ?> “/></a>
   After:
   <div class=”photo”>
   <a href=”<?php the_permalink() ?>” rel=”bookmark”><span></span><img class=”imgarchive” src=”<?php viva(’template’,”); ?> “/></a></div>Changes have been highlighted in bold.
8. As you can see I manually added the <span> tags into my template, and did not use the JQuery technique.
9. As far as the PNG fix for IE, you can just upload the iepngfix.htc to the root of your theme.
10. Open up your Header.php in the Theme Editor and add this line just above the </head> tag:

    <!--[if lt IE 7]>
    <style type=”text/css”>
    .photo span { behavior: url(<?php bloginfo(’template_url’); ?>/iepngfix.htc); } </style>
    <![endif]–>

11. I also had to add the following IE6 fix to my page to get it to work properly due to my setup as described in the #3 extra note. Here is the code I added after the .photo span style above:.photo {height:225px;overflow:hidden;width:410px;}

That’s it. I hope you find this helpful.

Feedback