Highlight Ads for few seconds

Question

I got a list of ads in my WordPress website on a sidebar. Is it possible to highlight an ad, that is, make it bigger in size for few seconds? I want to make each ad highlighted one after the other. Right now I am using max ad banner to get the rotating ads, but I do not want to have the rotation anymore.

Thanks

Answer 1

Well if you want to increase size you need two images of that add and if your getting some ads from sites that give you revenue then it would be quite hard as you cant call the same ad twice from them to get a bigger image.

Please do not take this next statement as an attack it is just some preference/opinion i have learned from hosting sites.

One thing i will state is that making ad's cycle in an order to make them bigger is a big eye sore for viewers people will see the ads no matter what size if you place them in the right places, but to make them go bigger for a few seconds then return to normal and go to next ad is a little annoying even if you make it go around only once and not loop

Answer 2

Playing around with CSS transitions and transforms a bit. It only works in Webkit (Safari, Chrome) and it is not finished. You may like the idea, though.

http://jsfiddle.net/Jv3tm/1/

HTML:

<ul id="ads">
    <li><a href="#"><img src="http://dummyimage.com/200x100/0f0/000&text=ad1"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/200x100/f0f/000&text=ad2"></a></li>
    <li><a href="#"><img src="http://dummyimage.com/200x100/06f/000&text=ad3"></a></li>
</ul>

CSS:

#ads li { margin:1em; text-align:center; }
#ads img { -webkit-transition:-webkit-transform 0.5s linear; }

JavaScript:

$(document).ready(function() {
    $('#ads img').each(function(i) {
        $(this).css({
            '-webkit-transition-delay': (i/2) + 's'
            ,'-webkit-transform': 'scale(1.2)'
        });
    });
});

@xLRDxREVENGEx: agreed on your point about this being annoying behavior.