We are using six images to demonstrate the gallery today all of them with 100 x 100 size to avoid frustrating layout.
Div would be used as a container, anchors to insert image links, the user would be redirected to a particular web page if he clicks on an image.
Let’s look at the code:
We can add different styles to the gallery like zoom in the images when hovered, to fade in or fade out images when they are hovered, to make images appear round and creativity unlimited!
The images would be shown with fade-out effect since we have set the image opacity to 0.2. You can see the same in the first picture above. In the second picture above, the first image becomes clearer and the borders become round as you hover on it. To achieve the effect associated with hover we have used :hover pseudo class for image.
Just add this line transform: rotate(-20deg); in the image: hover pseudo class. The above effect works in only some browsers. The rotation of the image depends on the degree you mention, it can be either positive or negative.If you use the things you learn with a little experimentation then you can have beautiful web pages!
The following image gallery is created with CSS : -