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

Effet de zoom images

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -100,41 +100,42 @@
<section id="portfolio">
<div class="d-flex flex-wrap">
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="Q16KpquGsIc" data-options="autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment="CECI EST UN TEST">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="Q16KpquGsIc" data-options="autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment="CECI EST UN TEST">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="Q16KpquGsIc" data-options="autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment="OU A OU A OU A OU A OU A OU A OU A OU A">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="Q16KpquGsIc" data-options="autoplay=1&loop=1&playlist=Q16KpquGsIc" data-comment="OU A OU A OU A OU A OU A OU A OU A OU A">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="32j58XJLHnE" data-options="autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment="Début du court-métrage Mushroom Dreams.">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="32j58XJLHnE" data-options="autoplay=1&loop=1&playlist=32j58XJLHnE" data-comment="Début du court-métrage Mushroom Dreams.">
<video loop muted poster="img/portfolio/champi.jpg">
<source src="video/portfolio/champi.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="X_NyayCTfS0" data-comment="Incroyable ! (Ça tourne mal)">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="X_NyayCTfS0" data-comment="Incroyable ! (Ça tourne mal)">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#sketchFabModal" data-sketchfabid="7507e61126754169937a24858981b185" data-comment="Metal Carrot">
<img src="img/portfolio/Metal Carrot1.jpg" />
<src="video/portfolio/Metal Carrot2.jpg" type="video/webm">
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#sketchFabModal" data-sketchfabid="7507e61126754169937a24858981b185" data-comment="Metal Carrot">
<div class="portfolio-container">
<img src="img/portfolio/Metal Carrot1.jpg" />
</div>
</div>
<div class="video-portfolio col-lg-4 col-sm-6">
<div class="element-portfolio video-portfolio col-lg-4 col-sm-6">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#vimeoModal" data-vimeoid="195989917" data-comment="Integer ut ultrices nibh. Praesent egestas suscipit velit id dictum. Quisque interdum porta rutrum. In neque lorem, pellentesque sit amet est quis, dapibus commodo neque. Aliquam rhoncus nisl nec accumsan efficitur. Aliquam nisi nisi, congue eu magna a, sollicitudin mollis lectus.">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#vimeoModal" data-vimeoid="195989917" data-comment="Integer ut ultrices nibh. Praesent egestas suscipit velit id dictum. Quisque interdum porta rutrum. In neque lorem, pellentesque sit amet est quis, dapibus commodo neque. Aliquam rhoncus nisl nec accumsan efficitur. Aliquam nisi nisi, congue eu magna a, sollicitudin mollis lectus.">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>
</div>
<div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="RV0M18MpDtQ" data-comment="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis arcu ut urna ullamcorper, nec fermentum ipsum semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.">
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="RV0M18MpDtQ" data-comment="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis arcu ut urna ullamcorper, nec fermentum ipsum semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.">
<video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm">
</video>

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;
}
}
}