@kona is correct when she says there's no way to do this on the front-end of Canvas, but it is possible by injecting some CSS into your webpage.
The gradebook avatar is marked up with the class gradebookAvatar. There is a CSS property called transform that allows you to scale the image and if you add it with a :hover pseudo-class, you can get the effect that you want.
Here is a 1.5 times zoom.
.gradebookAvatar:hover { transform: scale(1.5); }
You are limited by what looks good because of the box around the image. The above animation uses a 1.5 times scale and fits nicely within the confines of the border.
A 2 times zoom starts to get cropped a little on the top and the bottom extends outside the banner.
.gradebookAvatar:hover { transform: scale(2); }
A 3 times zoom really gets cropped.
.gradebookAvatar:hover { transform: scale(3); }
In my opinion, the 2 times zoom is probably the best.
Now, the question is how do you get this into your computer?
The way I do it is through a userscript.
- Install Tampermonkey, which is a userscript manager. This is not my script, but it's a program that allows you to run scripts within the browser. It's free for the PC browsers, but costs $1.99 for Safari on a Mac.
- Install the Canvas CSS Tweaks script I wrote. Once Tampermonkey is installed, clicking on this link will automatically try to install the script (it asks you to confirm and allows you to edit the script first).
There are actually 4 tweaks right now, but you can configure them to be installed or not installed. You can add a // in front of any item to comment it out. To make changes, scroll down to about line 18 where it has a list of the features.
- fullscreen removes the max-width that Canvas has so you get to use the full size of your wide-screen monitors.
- sg_rubrics removes the minimum width of 60 rem on the rubric criteria that make it impossible [for me] to see all of the criteria without really shrinking down the document portion
- no_test removes the banner warning you that you're in a beta or test instance of Canvas. This is useful for making videos in the test instance. This one is not enabled by default.
- sg_avatar_zoom is the new one I just added for you that will set the scale to 2 when you hover over the avatar in SpeedGrader. You can edit the statement and set the scale to something other than 2 if you like. Note that this wasn't here before your request, I added it just for you.
The script is a lot longer than it has to be, but I chose not to add the CSS unless it would be used on the page. Others could add it to the global CSS, but I haven't tested it everywhere and so I'm trying to minimize surprises. I won't guarantee this doesn't break anything in Canvas, but it's the tweaks that I use and I've not had problems. You mileage may vary, which is why I make everything configurable.
Note that you may need to modify the header of the script. By default, it runs on sites that are hosted at instructure.com. I'm not sure what UTexas uses. They have a canvas.utexas.edu and if that is what your URL inside Canvas looks like, then you will need to modify the headers. But they also have utexas.instructure.com and if that's what your URL looks like inside Canvas, then you won't need to do anything.
To change the headers, edit the script (step 2 will allow you to edit it before installing it) and change the match statements on lines 5 and 6 to canvas.utexas.edu instead of *.instructure.com. Leave the rest of the rest of the lines the same.
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.