Changing Image Upon Mouse Rollover

Question

We'd like to create a page of support staff such that when someone hovers over a staff member's image, a second image flips over in its place similar to the following:

https://pwd.aa.ufl.edu/about/team/

I appreciate any insights! I also use Articulate Storyline on occasion. If you happen to know a way to directly embed code with similar functionality from Storyline, I welcome that too. Thanks for any insights!

stimme · Accepted Answer

@andrew_sheppard That UFL example page is really cool! It looks like they implemented something like https://www.w3schools.com/howto/howto_css_flip_card.asp. Custom CSS can be defined for a Canvas account or sub-account by account admins. (SeeHow do I upload custom JavaScript and CSS files to an account? ) Once the flip-card classes are define, they can be added to divs like the ones in the w3 how to. Admittedly this is a hands-on, code heavy solution.

GideonWilliams · Accepted Answer

Am fortunate to have access to the custom CSS.

Just copied and added the CSS code from https://www.w3schools.com/howto/howto_css_flip_card.asp.to the CSS file and re-uploaded it in Themes.

Then created a new Canvas page and copied the html to the page. I had to upload a new front image to the course and add this to the code (just uploaded the image to files then right clicked and choose copy link).

Lots of opportunities and potential as you could change the text into hyperlinks so an interesting course menu? Here is the video!

(view in My Videos)