Added hover effect to portfolio

assets/css/main.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900");
 /*
 	Future Imperfect by HTML5 UP
 	html5up.net | @ajlkn
@@ -2590,23 +2589,108 @@ table.alt tfoot {
 }
 
 /* Portofolio */
-.portfolio_item .image {
+.portfolio_container {
+  padding: 1em 0;
+  float: left;
+  width: 50%;
+}
+.portfolio_container .title {
+  color: #1a1a1a;
+  text-align: center;
+  margin-bottom: 10px;
+}
+@media screen and (max-width: 736px) {
+  .portfolio_container .portfolio_container {
+    display: block;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1680px) {
+  .portfolio_container .portfolio_container {
+    width: 33.33333%;
+  }
+}
+
+.portfolio_content {
+  position: relative;
+  margin: 1em;
   overflow: hidden;
-  width: 100%;
-  border-radius: 10px;
 }
-.portfolio_item .image img {
+.portfolio_content a {
-  -moz-transition: -moz-transform 0.2s ease-out;
+  border: unset;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
+  margin-bottom: 0;
-  -ms-transition: -ms-transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-  width: 100%;
 }
-.portfolio_item .image:hover img {
+.portfolio_content .portfolio_content-overlay {
-  -moz-transform: scale(1.05);
+  background: rgba(0, 0, 0, 0.7);
-  -webkit-transform: scale(1.05);
+  position: absolute;
-  -ms-transform: scale(1.05);
+  height: calc(100% - 0.5em);
-  transform: scale(1.05);
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  -webkit-transition: all 0.4s ease-in-out 0s;
+  -moz-transition: all 0.4s ease-in-out 0s;
+  transition: all 0.4s ease-in-out 0s;
+  border-radius: 0.375em;
+}
+.portfolio_content:hover .portfolio_content-overlay {
+  opacity: 1;
+}
+.portfolio_content:hover .portfolio_content-details {
+  top: 50%;
+  left: 50%;
+  opacity: 1;
+}
+
+.portfolio_content-image {
+  width: 100%;
+  border-radius: 0.375em;
+}
+
+.portfolio_content-details {
+  position: absolute;
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: all 0.3s ease-in-out 0s;
+  -moz-transition: all 0.3s ease-in-out 0s;
+  transition: all 0.3s ease-in-out 0s;
+}
+.portfolio_content-details h3 {
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  margin-bottom: 0.5em;
+  text-transform: uppercase;
+}
+.portfolio_content-details p {
+  color: #fff;
+  font-size: 0.8em;
+}
+
+.fadeIn-bottom {
+  top: 80%;
+}
+
+.fadeIn-top {
+  top: 20%;
+}
+
+.fadeIn-left {
+  left: 20%;
+}
+
+.fadeIn-right {
+  left: 80%;
 }
 
 /* Banner */

assets/sass/components/_portfolio.scss

@@ -1,25 +1,114 @@
 
 /* Portofolio */
 
-	.portfolio_item {
+.portfolio_container{
+    padding: 1em 0;
+    float: left;
+    width: 50%;
+
+    .title{
+        color: #1a1a1a;
+        text-align: center;
+        margin-bottom: 10px;
+    }
+
+    @include breakpoint('<=small') {
+        .portfolio_container{
+            display: block;
+            width: 100%;
+        }
+    }
+    @include breakpoint('<=xlarge') {
+        .portfolio_container{
+            width: 33.33333%;
+        }
+    }
+}
 
 
-
+.portfolio_content {
-		.image {
+    position: relative;
+    margin: 1em;
     overflow: hidden;
-			width: 100%;
-			border-radius:10px;
 
-
+    a {
-			img {
+        border: unset;
-				@include vendor('transition', 'transform #{_duration(transition)} ease-out');
+        margin-bottom: 0;
-				width: 100%;
     }
 
+    .portfolio_content-overlay {
+        background: rgba(0,0,0,0.7);
+        position: absolute;
+        height: calc(100% - 0.5em);
+        width: 100%;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        opacity: 0;
+        -webkit-transition: all 0.4s ease-in-out 0s;
+        -moz-transition: all 0.4s ease-in-out 0s;
+        transition: all 0.4s ease-in-out 0s;
+        border-radius: 0.375em;
+    }
     &:hover {
-				img {
+        .portfolio_content-overlay{
-					@include vendor('transform', 'scale(1.05)');
+            opacity: 1;
+        }
+        .portfolio_content-details{
+            top: 50%;
+            left: 50%;
+            opacity: 1;
         }
     }
+}
+
+.portfolio_content-image{
+    width: 100%;
+    border-radius: 0.375em;
+}
+
+.portfolio_content-details {
+    position: absolute;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    -webkit-transition: all 0.3s ease-in-out 0s;
+    -moz-transition: all 0.3s ease-in-out 0s;
+    transition: all 0.3s ease-in-out 0s;
+
+    h3 {
+        color: #fff;
+        font-weight: 500;
+        letter-spacing: 0.15em;
+        margin-bottom: 0.5em;
+        text-transform: uppercase;
     }
+
+    p {
+        color: #fff;
+        font-size: 0.8em;
     }
+}
+
+.fadeIn-bottom{
+    top: 80%;
+}
+.fadeIn-top{
+top: 20%;
+}
+
+.fadeIn-left{
+left: 20%;
+}
+
+.fadeIn-right{
+left: 80%;
+}

assets/sass/main.scss

@@ -4,7 +4,7 @@
 @import 'libs/vendor';
 @import 'libs/breakpoints';
 @import 'libs/html-grid';
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900');
+// @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Raleway:400,800,900');
 
 /*
 	Future Imperfect by HTML5 UP

blueprints/portfolio.yaml

@@ -78,6 +78,21 @@ form:
             Effects_title:
               type: spacer
               title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.EFFECTS_TITLE
+            header.overlay_hover_effect:
+              type: select
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.LABEL
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.HELP
+              default: fadeIn-bottom
+              size: medium
+              options:
+                fadeIn-bottom: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM
+                fadeIn-top: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP
+                fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_LEFT
+                fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_RIGHT
+                fadeIn-top fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP_RIGHT
+                fadeIn-top fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_TOP_LEFT
+                fadeIn-bottom fadeIn-right: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM_RIGHT
+                fadeIn-bottom fadeIn-left: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OVERLAY_HOVER_EFFECT.FADEIN_BOTTOM_LEFT
             header.open_effect:
               type: select
               label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.LABEL

templates/portfolio.html.twig

@@ -50,14 +50,20 @@
 					{% set item_image = page.media[item.image] %}
 					{% set item_title = item.title|raw %}
 					{% set item_desc = item.description|raw %}
-					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).loading('lazy').attribute('decoding','async').attribute('itemprop','http://schema.org/image').html(item_title,item_title) %}
+					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).loading('lazy').attribute('decoding','async').attribute('itemprop','http://schema.org/image').html(item_title,item_title,'portfolio_content-image') %}
-					<div class="{{columns}} portfolio_item">
+					<div class="{{columns}} portfolio_container" itemprop="associatedMedia" itemscope itemtype="MediaObject">
-						<a href="{{item_image.url}}" class="glightbox" data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
+						{# <h3 class="title">{{item_title}}</h3> #}
-						<span class="image fit">
+						<div class="portfolio_content">
+							<a href="{{item_image.url}}" class="glightbox" data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc|raw}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
+							<div class="portfolio_content-overlay"></div>
 								{{ thumbnail|raw }}
-						</span>
+							<div class="portfolio_content-details {{page.header.overlay_hover_effect}}">
+								<h3 class="portfolio_content-title">{{item_title}}</h3>
+								<p class="portfolio_content-text">{{item_desc|truncate(75)|raw}}</p>
+							</div>
 							</a>
 						</div>
+					</div>
 				{% endfor %}
 				</div>
 			</section>