View Switcher without JavaScript

There is a manual slider called View Switcher. Although it is kinds of nude for users, the benefit is lasts as long as users like for each image manually. 

The slider contains the four images and a list of click button. The point is that image's Id name is the same as the click href URL, which can be connected respectively. 

The outer slider should be the box shown one image each time,using overflow:hidden.  When users target the the img,the opacity:1. When users leave the target, the opacity:0. Meanwhile, when first load the page, the target should be on slide-1 which means showing the first image. 

Then style the list part. The ul position should be absolute and li background is the circle using border-radius. Float:left means the list is horizental. 

You can look up in my codepen Here