Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Image HoverFX “Pulse” Effect

Many of our users had requested the code for the "Pulse" circle effect added on the images from the Hover FX for Dreamweaver sample page.

The "Pulse" circle can be easily added to all the images that have a Hover FX for Dreamweaver applied on them.

Here is an image that has the “Pulse” effect added on it.

You can add it to an image in just 3 steps:

1. Add the following 2 files inside your \includes\HoverFX folder:

- pulse.css – click here to download it.

- pulse.png – click here to download it.

2. Add the following path to the pulse.css file is added in the head tag of your page: <link rel="stylesheet" type="text/css" href="includes/HoverFX/pulse.css" />

There is no need to add the path to the pulse.png file in your page, as this file is added dynamically, from Javascript.

3. Add the following script to the bottom of your page, right before the body tag closes:

<script type="text/javascript">
(function(){

setTimeout(function(){
menus_jQuery(".hoverfx-effect").each(function(){
var e=menus_jQuery(this);
console.log(e);
menus_jQuery('<img class="pulse hide" src="includes/HoverFX/pulse.png" style="margin: 0 auto;display: block;position: absolute;border: 0;">').prependTo(e);
var t=e.find(".pulse");
e.hasClass("animate") ? t.addClass("pulse-animated"):null;
t.load(function(){
t.css({
"margin-top":Math.round(e.innerHeight()-t.innerHeight())/2,
"margin-left":Math.round(e.innerWidth()-t.innerWidth())/2
})});
t.css({"margin-top":Math.round(e.innerHeight()-t.innerHeight())/2,
"margin-left":Math.round(e.innerWidth()-t.innerWidth())/2});

t.removeClass(‘hide’);

e.on("tap",function(){
t.toggleClass("hide-important")});
e.hover(function(){
t.toggleClass("hide-important")})
})
},100);

})();
</script>

After adding the "Pulse", each image that has a HoverFX effect applied on it will have this effect added on it.

Facebook comments:



Leave a Reply