Changing Image Upon Mouse Rollover

[andrew_sheppard]

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 solution]

@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.

[stimme · Accepted solution]

@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 solution]

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!

[andrew_sheppard]

That's awesome!  What's the "Themes" you mentioned? Cheers! Oh, I see this now: https://community.canvaslms.com/t5/Admin-Guide/How-do-I-manage-themes-for-an-account/ta-p/154

[chriscas]

Hi @andrew_sheppard,

@stimme and @GideonWilliams  gave you some excellent advice on getting this going.  I did just want to mention the potential downsides to custom code like this...  You might find that one day, suddenly everything stops working after an update to Canvas or HTML standards, and will need to either try to update the code at that point or quickly redo any content that was made utilizing that code.  It might not be likely to happen tomorrow, but we have been caught out by things like this before and it's not fun when it happens.  Good luck if you do go this route though, it does look cool.

-Chris