TheBoz Posted December 12, 2016 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, Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2016 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; } Link to comment Share on other sites More sharing options...
TheBoz Posted December 14, 2016 Author 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? Link to comment Share on other sites More sharing options...
Ingolme Posted December 14, 2016 Share Posted December 14, 2016 Not without Javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now