Enlarge image when click in Dreamveawer 21.0

Hi Mona,

what do you think about this: https://www.w3schools.com/css/css_image_gallery.asp 

Please use your browser's search function or use w3schools.com directly in the same way. There are many examples you could use which exactly correspond to your ideas.

Hans-Günter

Hi Mona,

It's very important to optimize images for the web in Photoshop BEFORE you insert them into your HTML pages.  Ideally, images should never exceed 1MB in file size.  In fact, I try to keep them much smaller to improve page load speed & performance.  Remember, humans have the attention span of a goldfish.  They won't wait for a slow loading website, especially from their mobile devices.

To optimize images for the web in Photoshop, go to File > Export > Export As.  See screenshot.  Reducing quality also reduces file size.  On the web, it's not noticeable providing your images contain sufficient total pixels (height X width).

To answer your question, I think you want a modal image viewer.  Below is an example using Fancybox 3 and Bootstrap's mobile-first responsive framework.

https://alt-web.com/GALLERY/BS-Gallery.php

Hello,

for this cases I for my part use the "rollover" technique. Adobe has given a help site for this. Please see:

https://helpx.adobe.com/dreamweaver/user-guide.html/dreamweaver/using/insert-edit-images.ug.html
Insert and edit images in Dreamweaver >>> Create a rollover image >>> I quote:
A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. You must have two images to create the rollover. A primary image or the image displayed when the page first loads, and a secondary image or the image that appears when the pointer moves over the primary image. Both the images in a rollover must be of the same size. If the images are not the same size, Dreamweaver resizes the second image to match the properties of the first image.

Rollover images are automatically set to respond to the onMouseOver event. You can set an image to respond to a different event. For example, a mouse click or change a rollover image.  >>>  ....

Hans-Günter