nyanloutre/site-max
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Effet de zoom images

Browse source
This commit is contained in:
nyanloutre 2017-07-24 22:33:29 +02:00
parent 984cc93f24
commit 865794f209
Signed by: nyanloutre
GPG key ID: F85D93686A3A9063
2 changed files with 20 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

68
scss/_portfolio.scss
View file

@ -1,76 +1,26 @@
// Styling for the portfolio section
#portfolio {
padding: 0;
.video-portfolio {
padding-right: 3px;
padding-left: 3px;
.element-portfolio {
padding: 3px;
line-height: 0;
video {
width: 100%;
}
img {
width: 100%;
transition: 1s;
}
&.clickable {
cursor: pointer;
}
}
}
.portfolio-box {
position: relative;
display: block;
max-width: 650px;
margin: 0 auto;
.portfolio-box-caption {
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
color: white;
background: fade-out($theme-primary, .1);
@include transition-all;
.portfolio-box-caption-content {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
text-align: center;
.project-category,
.project-name {
padding: 0 15px;
@include sans-serif-font;
}
.project-category {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.project-name {
font-size: 18px;
&:hover {
img {
transform: scale(1.5);
}
}
}
&:hover {
.portfolio-box-caption {
opacity: 1;
}
}
&:focus {
outline: none;
}
@media (min-width: 768px) {
.portfolio-box-caption {
.portfolio-box-caption-content {
.project-category {
font-size: 16px;
}
.project-name {
font-size: 22px;
}
}
.portfolio-container {
overflow: hidden;
}
}
}