TheBoz 0 Posted December 12, 2016 Report Share Posted December 12, 2016 I am in the process of learning CSS and creating a stand alone web page for a kiosk at our school district. The site houses senior class composite photos (so one large photo with all the students in the class in it). I am currently inserting the full size .jpg in the page with an img tag and then I am using enlarge on hover to make the photo bigger. Once it enlarges it, it is static though, you can only see the part of the photo that fits on the screen. I need the users to be able to move the enlarged photo around (via touchscreen) so they can find the person they are looking for. Is this possible without having to use javascript? Thanks, Quote Link to post Share on other sites
Ingolme 1,035 Posted December 12, 2016 Report Share Posted December 12, 2016 If you put the image inside a container with overflow: auto, scrollbars will appear. On most touch screen devices boxes with scroll bars let you tap and drag to move the content within it. HTML <div class="pan"> <img src="file.jpg" alt="My photograph"> </div> CSS .pan { width: 900px; height: 500px; overflow: auto; } Quote Link to post Share on other sites
TheBoz 0 Posted December 14, 2016 Author Report Share Posted December 14, 2016 Thank you, I tried your code and it worked as you described. I was hoping for something that is a little more seamless. I am afraid some users will only see what is on the screen and not realize they can move around using the scroll bars as intuitive as it may seem. Is there a way to easily split the picture into say 6 zones and use the enlarge on hover command that way? Quote Link to post Share on other sites
Ingolme 1,035 Posted December 14, 2016 Report Share Posted December 14, 2016 Not without Javascript. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.