The simple way to implement these is to remember that the visual representation is for sighted users only.
As long as your HTML has all of the elements needed to navigate the site with CSS turned off you can do what you like to build the visual representation without needing to consider whether your work is accessible to those just browsing the HTML.
Remember that there are two layers, HTML, which marks up the actual document and CSS which provides a visual skin on the site.
A good example of doing this wrong would be putting content in a ::before psuedo-selector that would only appear on hover. As this would only be in the CSS it would not be rendered to someone just accessing the HTML. However, in this case, as you're going to be linking, you'll need an <a> in the HTML anyway. Just don't do anything crazy with hover, DOM manipulation and Javascript and you've just about won.
A simple test is to switch CSS off on the site (just rename the file) and check that you can still consume all of the content easily. A more robust test is to get some visually impaired users or some screen reading technology and test with that.
Having said this, I'd advise against having nothing visible in the design to suggest hover. Just having an area of the screen that triggers the arrow isn't as easy to use as having a marker to say 'interact with me to navigate'. Fancy effects can then be applied to the hover state.
If you did this, you'd have something touch screen users could see and click as well.
Finally, blocking and interference on smaller screens is an implementation thing, so not really a question for here.