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