How to make photo sliding effect using HTML and CSS ?
It is an easy and amazing animation effect created with HTML and CSS, where the photos are moving horizontally one by one like a roller. When the mouse pointer comes upon the photo then the specific photo stops moving.
Approach: The basic idea of these animation comes from the hover effect of CSS animation. Let us see how the code works.
HTML code: The photos will be moving in a circular ring using HTML. To create the animation, we have taken a “div” and a section to maintain the area of the photos properly and the class name is used in the CSS code. We used HTML figure and img tag for the photos which will be shown in the page.
CSS Code: Let us talk about the CSS part of the code. Some basic attributes are used like margin, padding, position, float, border, animation, etc which will help the photos giving them the right position. It helps to rotate the photos in 2D. First it rotates around its own axis. Then the whole “div” rotates around its axis.
To create this animation, figure:nth-child(“no. of child”) property is used. The transform:rotateY(amount of deg) and translateZ(–px) are the two attributes of CSS which helps to rotate the object.
Final code: In this section, we will combine the above two sections (HTML and CSS) of code.