The thing that was wrong in your file, was that you had not moved the slider far enough left when adding the image. You have to be in the left-most screen size when you add things, after that you can move the slider past the first breakpoint, make some changes, move the slider past the next breakpoint, make changes again if necessary and so on. There were a lot of code entries from your attempts that I had to remove.
Bootstrap, Foundation, Materialize and Vanilla are different grid systems. That is, Vanilla seems to be at least two different systems, the one incorporated in SDv3 has no supporting css and js files, you need to find and add them yourself. Most people here in these forums use Foundation, then there is a fair amount of Bootstrap users, but the other two don't seem to have much of a 'congregation' here.
You obviously have started with Foundation, and that is actually a lucky choice, because of the lot of users who will be able to help if needed. I therefore would disagree with the person at support who said you should use Materialize. I don't know my way around that grid system, for all I know it may be a good system, but I don't think it would be wise to mix it with Foundation. You can make images enlarge when hovered or clicked on, also in Foundation. I have such a ready-made building block in my afore mentioned library, go to the right-most column look for 'Zoom on Hover' in the Gallery section. You could also take a look at the one called 'Image gallery' in the same section.