Zoom on Hover

HTML & CSS
1

I have limited knowledge about html coding. How can I replace the green box with an image on this code, https://www.w3schools.com/howto/howto_css_zoom_hover.asp? Thanks.

2

Use an <img> element with a valid src attribute pointing to the image you want.

1 Like
3

bsfns5,

Have you considered taking a formal course in HTML and CSS?

1 Like
4

Depending on your intended use, there may be better ways to go about this. Hover effects will not work on touchscreen, or for anybody using keyboard navigation. If it’s important that users are able to see the zoomed version, I would recommend taking another approach.

2 Likes
5

A partial solution…

CSS

.element:hover,
.element:active, 
.element:focus {
                 /*code*/
 }

HTML

<element tabindex="1"></element>

coothead

3 Likes
6

Thank you all for your responses.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.