CSS3 Gallery
Hello, habrovchane!
Most recently, I was puzzled to try css3-buns in action. Look at what they are suitable in reality. My gaze fell on the familiar fancybox galleries, etc. In other words - I decided to make a semblance of a js gallery, but only on pure html + css.
Let's get started
With the arrangement of the pictures, I didn’t bother much, having built them into the “wall” through float: left. The parent for the image is a link (“a” tag), why — it will be clear below. Because I decided to make four rows of four pictures, we give them 25% of the height and width. Borders "put" in the container through box-sizing. It looks like this:
Now we work with the image. We give it 100% dimensions, absolute positioning and transition. Code attached:
In one of the gallery options, I decided to make a signature for the photos. Implemented through pseudo-element: after.
I think everything is clear.
')
There was a question on what action to open the image. After all, it is necessary that it opens and remains in this state until we watch. Found out in pseudo-class: focus. And since it only works for form fields and links, we needed the “a” tag
We make out:
The note. The pseudo-class: focus does not work correctly with the Chrome browser, found the output by adding the tabindex link.
In principle, everything is ready and you can start using it. But the trouble is that all the images unfold from the upper left to the lower right, and this will not always play into the hands. After all, if this gallery is near the right or bottom of the browser window, then the unfolded image will form the corresponding scroll bars. How to get rid of it? The pseudo-class: nth-child came to the exit, with its ability to set the frequency of using the properties:
Because I have a 4 * 4 grid, then in this case the 12th element, for example, will unfold from the bottom and to the right in the upper left corner. Thus, all our images will be displayed inside the image container itself. Along the way, we solved the problem with dynamically added images - we don’t need to assign classes -: nth-child will take care of this itself.
Well, now everything is exactly ... And how to forcibly close the image? Reasonable question. We decide. Once we have a photo opened by the “focus”, then in order to close it, we need to remove the focus from it. Here I didn’t bother much and decided to make one general “button” and hang it in the upper right corner of the gallery. What is remarkable here is that I made it an ordinary plus by turning it 45 degrees and adding a shadow to it:
However, we are used to the fact that one element can depend on another and only react to its actions if it is a descendant. And to breed 20 descendants is reluctant (by the way, for the same reason I made only one button.)
We came to the aid of the selector of generalized related elements "~". As a result, we made one element in the markup and placed it in a container for our images so that they have one common parent. Well, we use the standard technique:
Now, if we click on any of the photos, we have a cross in the upper right corner, with a click on which the image collapses. And the cross, respectively, disappears too.
Working examples:
first option
second option
Most recently, I was puzzled to try css3-buns in action. Look at what they are suitable in reality. My gaze fell on the familiar fancybox galleries, etc. In other words - I decided to make a semblance of a js gallery, but only on pure html + css.
Let's get started
With the arrangement of the pictures, I didn’t bother much, having built them into the “wall” through float: left. The parent for the image is a link (“a” tag), why — it will be clear below. Because I decided to make four rows of four pictures, we give them 25% of the height and width. Borders "put" in the container through box-sizing. It looks like this:
a{ float: left; width: 25%; height: 25%; position: relative; border: 1px solid #333; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Now we work with the image. We give it 100% dimensions, absolute positioning and transition. Code attached:
a img{ display: block; width: 100%; height: 100%; -webkit-transition-property: width, height; /* , */ -webkit-transition-duration: 300ms; /* , */ -moz-transition-property: width, height; -moz-transition-duration: 300ms; -o-transition-property: width, height; -o-transition-duration: 300ms; position: absolute; opacity: 0.3; /* */ cursor: pointer; }
In one of the gallery options, I decided to make a signature for the photos. Implemented through pseudo-element: after.
a:after { display: block; position: absolute; width: 100%; height: 100%; content: "Studio.com"; color: #eaeaea; font-family: "Trebuchet MS"; font-size: 16px; opacity: 0.5; }
I think everything is clear.
')
There was a question on what action to open the image. After all, it is necessary that it opens and remains in this state until we watch. Found out in pseudo-class: focus. And since it only works for form fields and links, we needed the “a” tag
We make out:
a:focus img{ width: 250%; /* */ height: 250%; position: absolute; opacity: 1; /* */ z-index: 1; /* */ -moz-box-shadow: 0 0 15px 2px #000; -webkit-box-shadow: 0 0 15px 2px #000; box-shadow: 0 0 15px 2px #000; /* */ -webkit-transition-property: width, height; /* «» */ -webkit-transition-duration: 2s; /* , */ -webkit-transition-delay: 0.3s; /* , , */ -moz-transition-property: width, height; -moz-transition-duration: 2s; -moz-transition-delay: 0.3s; -o-transition-property:width, height; -o-transition-duration: 2s; -o-transition-delay: 0.3s; cursor: default; }
The note. The pseudo-class: focus does not work correctly with the Chrome browser, found the output by adding the tabindex link.
In principle, everything is ready and you can start using it. But the trouble is that all the images unfold from the upper left to the lower right, and this will not always play into the hands. After all, if this gallery is near the right or bottom of the browser window, then the unfolded image will form the corresponding scroll bars. How to get rid of it? The pseudo-class: nth-child came to the exit, with its ability to set the frequency of using the properties:
a:nth-child(4n+4) img, a:nth-child(4n+3) img{ right: 0; } /* 3- 4- */
a:nth-child(n+9) img{ bottom: 0; } /* , */
Because I have a 4 * 4 grid, then in this case the 12th element, for example, will unfold from the bottom and to the right in the upper left corner. Thus, all our images will be displayed inside the image container itself. Along the way, we solved the problem with dynamically added images - we don’t need to assign classes -: nth-child will take care of this itself.
Well, now everything is exactly ... And how to forcibly close the image? Reasonable question. We decide. Once we have a photo opened by the “focus”, then in order to close it, we need to remove the focus from it. Here I didn’t bother much and decided to make one general “button” and hang it in the upper right corner of the gallery. What is remarkable here is that I made it an ordinary plus by turning it 45 degrees and adding a shadow to it:
-webkit-text-shadow: 0px 0px 5px #222; -moz-text-shadow: 0px 0px 5px #222; text-shadow: 0px 0px 5px #222; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); cursor: pointer;
However, we are used to the fact that one element can depend on another and only react to its actions if it is a descendant. And to breed 20 descendants is reluctant (by the way, for the same reason I made only one button.)
We came to the aid of the selector of generalized related elements "~". As a result, we made one element in the markup and placed it in a container for our images so that they have one common parent. Well, we use the standard technique:
.closed{ display: none; } a:focus~.closed{ display: block; }
Now, if we click on any of the photos, we have a cross in the upper right corner, with a click on which the image collapses. And the cross, respectively, disappears too.
Working examples:
first option
second option
Source: https://habr.com/ru/post/130277/
All Articles