Carousel dans portfolio

index.html

@@ -122,7 +122,7 @@
             </div>
             <div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="7507e61126754169937a24858981b185">
                 <div class="portfolio-container">
-                    <img src="img/portfolio/Metal Carrot1.jpg" />
+                    <img class="dynamic-zoom" src="img/portfolio/Metal Carrot1.jpg" />
                 </div>
             </div>
             <div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="202941724" data-comment="Tableau de Santiago Rusiñol y Prat que j'ai animé avec Clémentine Mériadec pour une diffusion au musée GOYA de Castres.">
@@ -160,6 +160,29 @@
                     <source src="video/portfolio/water.webm" type="video/webm">
                 </video>
             </div>
+            <div class="element-portfolio col-lg-4 col-sm-6">
+                <div id="carouselExample" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner" role="listbox">
+                        <div class="carousel-item active">
+                        <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285%22%20y%3D%22216.2%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
+                        </div>
+                        <div class="carousel-item">
+                        <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c4%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c4%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22245.5%22%20y%3D%22216.8%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
+                        </div>
+                        <div class="carousel-item">
+                        <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15d8505d8c0%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15d8505d8c0%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22275.5%22%20y%3D%22216.2%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
+                        </div>
+                    </div>
+                    <a class="carousel-control-prev" role="button" data-slide="prev" href="#carouselExample">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" role="button" data-slide="next" href="#carouselExample">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Next</span>
+                    </a>
+                </div>
+            </div>
         </div>
     </section>
 

scss/_portfolio.scss

@@ -9,13 +9,15 @@
         }
         img {
             width: 100%;
+        }
+        .dynamic-zoom {
             transition: 1s;
         }
         &.clickable {
             cursor: pointer;
         }
         &:hover {
-            img {
+            .dynamic-zoom {
                 transform: scale(1.5);
             }
         }