boyan_k/reValuate
boyan_k/reValuate
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Format CSS

Browse Source
This commit is contained in:
Velichko Karakostov 2021-08-31 13:27:38 +03:00
parent a6241563c7
commit 2e4f3efe7d
No known key found for this signature in database
GPG Key ID: D4463EC61D69232E
1 changed files with 108 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
reValuate/home/static/home/css/gallery.css
View File

@ -1,18 +1,21 @@
.popup{ .popup {
width: 900px; width: 900px;
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
.popup img{
.popup img {
width: 200px; width: 200px;
height: 200px; height: 200px;
cursor: pointer; cursor: pointer;
} }
.show{
.show {
z-index: 999; z-index: 999;
display: none; display: none;
} }
.show .overlay{
.show .overlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0,0,0,.66); background: rgba(0,0,0,.66);
@ -20,7 +23,8 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.show .img-show{
.show .img-show {
width: 600px; width: 600px;
height: 400px; height: 400px;
background: #FFF; background: #FFF;
@ -30,14 +34,16 @@
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
overflow: hidden; overflow: hidden;
} }
.img-show span{
.img-show span {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
z-index: 99; z-index: 99;
cursor: pointer; cursor: pointer;
} }
.img-show img{
.img-show img {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -49,36 +55,36 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-family: Raleway; font-family: Raleway;
background-color: #202125; background-color: #202125;
} }
.heading { .heading {
text-align: center; text-align: center;
font-size: 2.0em; font-size: 2.0em;
letter-spacing: 1px; letter-spacing: 1px;
padding: 40px; padding: 40px;
color: white; color: white;
} }
.gallery-image { .gallery-image {
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.gallery-image img { .gallery-image img {
height: 250px; height: 250px;
width: 350px; width: 350px;
transform: scale(1.0); transform: scale(1.0);
transition: transform 0.4s ease; transition: transform 0.4s ease;
} }
.img-box { .img-box {
box-sizing: content-box; box-sizing: content-box;
margin: 10px; margin: 10px;
height: 250px; height: 250px;
@ -88,47 +94,34 @@
color: white; color: white;
position: relative; position: relative;
background-color: white; background-color: white;
} }
.caption { .caption {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
left: 20px; left: 20px;
opacity: 0.0; opacity: 0.0;
transition: transform 0.3s ease, opacity 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease;
} }
.transparent-box { .transparent-box {
height: 250px; height: 250px;
width: 350px; width: 350px;
background-color:rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.img-box:hover img { .img-box:hover img { transform: scale(1.1); }
transform: scale(1.1); .img-box:hover .transparent-box { background-color: rgba(0, 0, 0, 0.5); }
}
.img-box:hover .transparent-box { .img-box:hover .caption {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box:hover .caption {
transform: translateY(-20px); transform: translateY(-20px);
opacity: 1.0; opacity: 1.0;
} }
.img-box:hover { .img-box:hover { cursor: pointer; }
cursor: pointer; .caption > p:nth-child(2) { font-size: 0.8em; }
} .opacity-low { opacity: 0.5; }
.caption > p:nth-child(2) {
font-size: 0.8em;
}
.opacity-low {
opacity: 0.5;
}