Create These Cool Mouse Rollover Effects In Articulate Storyline Using CSS

Thanks to the Accessibility settings available to use on images in Articulate Storyline 360, we can create some very nice transition effects for any image used in our projects. All it takes is just a few extra lines of CSS added into our published eLearning content! Here’s how it’s done…

For the longest time we didn’t think that it was actually possible to target individual images in a published Articulate Storyline project using CSS. This is because neither the original image file name, or the timeline element name that we can set in Storyline, get used in the final output created by the software.

However! We were excited to discover something we didn’t know this week, which is that within our right-click>accessibility options for all slide images we have the ability to enter an alt tag. This tag ultimately gets applied as an attribute to the div element which contains the image displayed on screen. That means that we can target this attribute using CSS in order to apply some interesting effects, not possible within Storyline itself!

For the purposes of this tutorial, the alternative text I will be using for my images will simply be ‘image001’ ‘image002’ ‘image003’ ‘image004’. You can continue to use your own alt tags for the purpose of providing accessible eLearning to screen readers, just make a note of the exact text you are using to input into the following tutorials.

To add extra lines of CSS to your published project, navigate to your html5>data>css folder and open the output.min.css file in your favourite code editor. Scroll to the very bottom and include any of the examples below as new line items in the CSS file. Be sure to save and refresh your browser to see the result!

Create an image zoom effect when mouse hovers over – within a frame

Example:

In order to create this image zoom effect which maintains the width and height values set around the frame of the image, add the following to your css file:

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] div {
overflow: hidden;
}

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] svg {
transition: all 2s ease;
transform-origin: center center;
}

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] svg:hover {
transform: scale(1.4);
}

TIP: Try using a greater scale value to increase the zoom amount, like 1.8. Also, if you want to slow down the zoom speed, change the transition amount from 2s to e.g. 5s. There are various transition options available in CSS, so feel free to try them all out!

Create an image zoom effect when mouse hovers over – full image scales up

Example:

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] div {
overflow: visible;
}

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] svg {
transition: all 2s ease;
transform-origin: center center;
}

[data-acc-text~="YOUR_ACCESSIBILITY_TITLE_GOES_HERE"] svg:hover {
transform: scale(1.4);
}

TIP: If you want this effect to occur when the user clicks rather than on mouse hover, use ‘svg:active’ instead of ‘svg:hover’. Note however that this only work if the user clicks and holds their mouse. If the user is a touch device however, the zoom effect will stay in place until something else is tapped.

Create a grayscale hover effect with mouse click zoom

Using the hover and active selectors together on the same element in CSS, we can create different effects based on different user actions. I appreciate that the grayscale effect is actually possible to produce in Storyline, but still, it’s pretty cool! (I’m using my own accessibility tags for the code shown below, use comma separated values when you have multiple images on one slide.)

Example:

[data-acc-text~="image001"] div, [data-acc-text~="image002"] div, [data-acc-text~="image003"] div, [data-acc-text~="image004"] div {
overflow: visible;
}

[data-acc-text~="image001"] svg, [data-acc-text~="image002"] svg, [data-acc-text~="image003"] svg, [data-acc-text~="image004"] svg {
transition: all 2s ease;
transform-origin: center center;
filter: grayscale(80%);
}

[data-acc-text~="image001"] svg:hover, [data-acc-text~="image002"] svg:hover, [data-acc-text~="image003"] svg:hover, [data-acc-text~="image004"] svg:hover {
filter:grayscale(0%);
}

[data-acc-text~="image001"] svg:active, [data-acc-text~="image002"] svg:active, [data-acc-text~="image003"] svg:active, [data-acc-text~="image004"] svg:active {
transform: scale(1.4);
}