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

Specto fixes #9

Merged
confestim merged 7 commits from specto-fixes into main 2021-09-10 16:35:54 +02:00
Conversation 0 Commits 7 Files Changed 188 +108 -115
1 changed files with 108 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2e4f3efe7d - Show all commits

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

@ -1,134 +1,127 @@
.popup{ .popup {
width: 900px; width: 900px;
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
.popup img{
width: 200px; .popup img {
height: 200px; width: 200px;
cursor: pointer; height: 200px;
cursor: pointer;
} }
.show{
z-index: 999; .show {
display: none; z-index: 999;
display: none;
} }
.show .overlay{
width: 100%; .show .overlay {
height: 100%; width: 100%;
background: rgba(0,0,0,.66); height: 100%;
position: absolute; background: rgba(0,0,0,.66);
top: 0; position: absolute;
left: 0; top: 0;
left: 0;
} }
.show .img-show{
width: 600px; .show .img-show {
height: 400px; width: 600px;
background: #FFF; height: 400px;
position: absolute; background: #FFF;
top: 50%; position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%); left: 50%;
overflow: hidden; transform: translate(-50%,-50%);
overflow: hidden;
} }
.img-show span{
position: absolute; .img-show span {
top: 10px; position: absolute;
right: 10px; top: 10px;
z-index: 99; right: 10px;
cursor: pointer; z-index: 99;
cursor: pointer;
} }
.img-show img{
width: 100%; .img-show img {
height: 100%; width: 100%;
position: absolute; height: 100%;
top: 0; position: absolute;
left: 0; top: 0;
left: 0;
} }
* { * {
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;
width: 350px; width: 350px;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
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); transform: translateY(-20px);
} opacity: 1.0;
}
.img-box:hover .caption { .img-box:hover { cursor: pointer; }
transform: translateY(-20px); .caption > p:nth-child(2) { font-size: 0.8em; }
opacity: 1.0; .opacity-low { opacity: 0.5; }
}
.img-box:hover {
cursor: pointer;
}
.caption > p:nth-child(2) {
font-size: 0.8em;
}
.opacity-low {
opacity: 0.5;
}