Pulsing Hotspot Effect

I'd like a pulsing hotspot animation effect. i.e. grow 20%, revert to original, loop continuously.

The image would be either a circle, square or rectangle, outlined or filled with slight transparency.

Discussion (3)

Could you use an animated GIF as your hotspot image? Not that ELB couldn't add this effect, but as a stopgap. I haven't tried, can CVR handle transparent/semitransparent images?

CVR doesn't import animated gif file types. I suppose I could add it as a transparent video but videos don't always work across all devices. I just want to mimic what Articulate Storyline has for its hotspots.

Hello, do it with CSS. First, in Lectora, add an HTML extension to the page, type Cascading-Style-Sheet (I'm working with the German-language Lectora version; I'm not sure how this is displayed in the original language - at least CSS has to come out: -)).

Then feed the HTML extension with the following CSS code:

@keyframes Puls_1_Normal_Regular {

0% {

transform: scale(1);


50% {

transform: scale(1.1);


100% {

transform: scale(1);



.Puls_Regular {

  animation: Puls_1_Normal_Regular 2s linear 0s 1 normal none;


.Unendlich {

  animation: Puls_1_Normal_Regular 2s linear 0s infinite normal none;


In the next step, the Lectora element (text, image, etc.) must receive the CSS class Unendlich. (The German word Unendlich stands for infinite :-)). I have a screenshot attached.