laravelEcomm/public/Dashboard/scss/common/dark/components/_portfolio.scss

/* Portfolio */
.portfolio-grid {
	figure {
		position: relative;
		float: left;
		overflow: hidden;
		width: 100%;
		background: theme-color(primary);
		text-align: center;
		cursor: pointer;
		
		img {
			position: relative;
			display: block;
			min-height: 100%;
			max-width: 100%;
			width: 100%;
			opacity: 0.8;
		}

		figcaption {
			padding: 2em;
			color: $white;
			text-transform: uppercase;
			font-size: 1.25em;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			&:after,
			&:before {
				pointer-events: none;
			}
		}

		&.effect-text-in {
			border-radius: 0.25rem;

			h4,
			img {
				-webkit-transition: -webkit-transform 0.35s;
				transition: transform 0.35s;
			}

			img {
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}

			h4,
			p {
				position: absolute;
				bottom: 10px;
				left: 0;
				padding: 10px;
				margin-bottom: 0;
				width: 100%;
			}

			p {
				text-transform: none;
				opacity: 0;
				-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
				transition: opacity 0.35s, transform 0.35s;
				-webkit-transform: translate3d(0,50px,0);
				transform: translate3d(0,50px,0);
			}

			&:hover {
				img {
					-webkit-transform: translate3d(0,-80px,0);
					transform: translate3d(0,-80px,0);
				}

				h4 {
					-webkit-transform: translate3d(0,-100px,0);
					transform: translate3d(0,-100px,0);
				}

				p {
					opacity: 1;
					-webkit-transform: translate3d(0,0,0);
					transform: translate3d(0,0,0);
				}
			}
		}
	}
}