mirror of
https://github.com/pmoreno-rodriguez/grav-theme-future2021.git
synced 2025-06-07 11:58:53 +00:00
Added hover effect to portfolio
This commit is contained in:
pmoreno.rodriguez
parent
fc91f68697
commit
d298e75c67
6 changed files with 236 additions and 42 deletions
|
|
@ -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 {
|
||||
-moz-transition: -moz-transform 0.2s ease-out;
|
||||
-webkit-transition: -webkit-transform 0.2s ease-out;
|
||||
-ms-transition: -ms-transform 0.2s ease-out;
|
||||
transition: transform 0.2s ease-out;
|
||||
width: 100%;
|
||||
.portfolio_content a {
|
||||
border: unset;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.portfolio_item .image:hover img {
|
||||
-moz-transform: scale(1.05);
|
||||
-webkit-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
.portfolio_content .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;
|
||||
}
|
||||
.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 */
|
||||
|
|
|
|||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,25 +1,114 @@
|
|||
|
||||
/* Portofolio */
|
||||
|
||||
.portfolio_item {
|
||||
|
||||
|
||||
.portfolio_container{
|
||||
padding: 1em 0;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
.image {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-radius:10px;
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
@include vendor('transition', 'transform #{_duration(transition)} ease-out');
|
||||
width: 100%;
|
||||
}
|
||||
.portfolio_content {
|
||||
position: relative;
|
||||
margin: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
@include vendor('transform', 'scale(1.05)');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
border: unset;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.portfolio_content-overlay{
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -50,13 +50,19 @@
|
|||
{% 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) %}
|
||||
<div class="{{columns}} portfolio_item">
|
||||
<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">
|
||||
<span class="image fit">
|
||||
{{ thumbnail|raw }}
|
||||
</span>
|
||||
</a>
|
||||
{% 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_container" itemprop="associatedMedia" itemscope itemtype="MediaObject">
|
||||
{# <h3 class="title">{{item_title}}</h3> #}
|
||||
<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 }}
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue