I recently added a rollover effect to my site logo (if you rollover the rhoek.blog
logo at the top you should see what I mean), and here's how it's done.
Overview.
The effect is created by using a transparent image for the physical logo uploaded
to DNN and then using CSS to add a background of the logo image. This background
contains both states of the rollover, the normal view and the rollover effect,
which is then re-positioned using the a:hover pseudo-class, to create a rollover.
Step 1. Create the logo background graphic.

Using photoshop, or whichever graphics package you use for creating artwork,
design and layout 2 versions of your logo,1 for each of the 2 states. The key
to remember here is that only half of the image will show at any one time, so
make sure that the image is twice the height of the logo you use on your site,
also make sure that each state is centered within its half so they line up when
the effect is complete.
Image Sizes:
For the example shown my physical logo size is 225px x 78px and the backgr ...