A few months ago I shared here one of my codes which allowed to realize simply a “double views” effect in CSS.
I put you the direct link to the article here !
See the Pen 2 views with mouseover (Only CSS) by Benjamin Simier (@benjaminsimier) on CodePen.
Today I decided to improve my project and share it with you. The idea was to create, not a “2 views” but a “3 views” while keeping the original idea (animation, layout, …)
I realized 2 projects, the first one just uses CSS and there is no animation on the width of the views. The second is an evolution of the first and integrates in addition to the Jquery.
Whether for the first version or the second, I decided to go on an HTML list (ul> li), which will allow me to count the elements li.
First version (CSS only)
As you can see, there is no real animation, except a change of opacity when the cursor moves.
See the Pen 3 views simple CSS by Benjamin Simier (@benjaminsimier) on CodePen.
Advanced version (CSS + Jquery)
This version adds the animation of the width of the views thanks to the Jquery.
See the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.
To use the Jquery functions, use the CDN : https://code.jquery.com/jquery-3.3.1.min.js