Highlighted
Community Member

Hover over image to change image size

Jump to solution

I use a "page" for my homepage/welcome screen. I have added images to the homepage that are links to the different learning modules.

What I want to do is when the mouse hovers over the image that it will enlarge or change color or a text overlay. 

hover over‌ hover hyperlinking‌ #hyperlink

Here is my HTML:

<p style="text-align: left;"><a href="https://k12.instructure.com/courses/65476/pages/01-dot-1-safety?module_item_id=734885" target="_blank" rel="noopener" data-api-endpoint="https://k12.instructure.com/api/v1/courses/65476/pages/01-dot-1-safety" data-api-returntype="Page"><img src="https://k12.instructure.com/courses/65476/files/1113463/download" alt="01 Shop Safety.jpg" data-api-endpoint="https://k12.instructure.com/api/v1/courses/65476/files/1113463" data-api-returntype="File" /></a></p>

Screenshot of home page

1 Solution

Accepted Solutions
Highlighted
Surveyor II

Hi Adam, 

Nice work! I don't think the text editor support CSS hovers. If you place the code in, Canvas will just strip it out. Hovers can't be achieved with HTML alone. 

View solution in original post

2 Replies
Highlighted
Surveyor II

Hi Adam, 

Nice work! I don't think the text editor support CSS hovers. If you place the code in, Canvas will just strip it out. Hovers can't be achieved with HTML alone. 

View solution in original post

Highlighted
Community Member

That what I found I kept adding the CSS into the HTML code and it would drop it all but the tooltip

Thank you, I was not sure if I was just messing up. 

0 Kudos