A card that requires login (HTML,CSS,jQuery)
There is a card I had to work on a long time ago, so I decided to share it with you. It’s a card ( not the most beautiful one ) that has some images inside and if you wanna scroll inside will require a login to do it, the login is simple is just a click on this sample but… yea this is the idea behind.
Let’s go…
First the HTML code
Okay, there is the main div that has inside the header with an image, the body that there are some divs with images inside that can be scrolled horizontally and there is the hover div that has login button that will come out if you hover on the card.
CSS code
So, besides the style that I’m doing with CSS there is the login-hover class that is positioned absolute on the card div (that has relative). So when we hover on the card the login-hover will show and it has a button inside.
Javascript(jQuery) code
Little of JS code, it’s only removing that hover div when button Login is clicked, and it will bring back when we click the button outside the card.
I hope this will make use of you one day, there is the codepen link to check how it works https://codepen.io/lbnt/pen/RwPvqyK.
