42 行
1.4 KiB
CSS
42 行
1.4 KiB
CSS
|
.photo {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.no-touch .photo {
|
||
|
|
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
|
||
|
|
filter: gray; /* IE6-9 */
|
||
|
|
-webkit-filter: grayscale( 100% ); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
|
||
|
|
opacity: .7;
|
||
|
|
transition: all 400ms ease-in-out;
|
||
|
|
}
|
||
|
|
.no-touch .photo:hover {
|
||
|
|
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
|
||
|
|
-webkit-filter: grayscale(0%);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.scrollable-div {
|
||
|
|
height: 70vh; /* set a fixed height for the div */
|
||
|
|
overflow-y: scroll; /* enable vertical scrollbar */
|
||
|
|
}
|
||
|
|
@media screen and ( min-width: 768px ) {
|
||
|
|
.photo { float: left; width: 50%; }
|
||
|
|
}
|
||
|
|
@media screen and ( min-width: 1023px ) {
|
||
|
|
.photo { width: 33.3333%; }
|
||
|
|
}
|
||
|
|
@media screen and ( min-width: 1220px ) {
|
||
|
|
.photo { width: 25%; }
|
||
|
|
}
|
||
|
|
@media screen and ( min-width: 1440px ) {
|
||
|
|
.photo { width: 20%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.photo:after {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
padding-bottom: 100%;
|
||
|
|
}
|