PHP Classes

File: assets/pages/css/portfolio.css

Recommend this page to a friend!
  Classes of Nemeth Zoltan   YAF Base   assets/pages/css/portfolio.css   Download  
File: assets/pages/css/portfolio.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: YAF Base
Base structure for YAF framework based apps
Author: By
Last change:
Date: 7 years ago
Size: 2,132 bytes
 

Contents

Class file image Download
/* Portfolio */ /* Portfolio Filter */ .mix-filter { list-style: none; margin: 0 0 20px; padding: 0; } .mix-filter li { color: #555; cursor: pointer; padding: 6px 15px; margin-right: 2px; margin-bottom: 5px; background: #eee; display: inline-block; } .mix-filter li:hover, .mix-filter li.active { color: #fff; background: #e44f00; } .mix-grid .mix { opacity: 0; display: none; } /* Portfolio Hover */ .mix-grid .mix { position: relative; overflow: hidden; margin-bottom: 15px; } .mix-grid .mix .mix-inner { position: relative; width: 100%; } .mix-grid .mix .mix-details { color: #fff; width: 100%; height: 100%; bottom: -100%; text-align: center; position: absolute; background: rgba(228,79,0,1); transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .mix-grid .mix:hover .mix-details { bottom: 0; transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .mix-grid .mix .mix-details h4 { color: #fff; margin-top: 30px; padding: 0 10px; } .mix-grid .mix .mix-details p { padding: 0 30px; } .mix-grid .mix .mix-details i { color: #fff; font-size: 14px; } .mix-grid .mix a.mix-link, .mix-grid .mix a.mix-preview { color: #555; display: block; cursor: pointer; margin-top: 10px; position: absolute; padding: 10px 15px; background: #DB3A1B; } .mix-grid .mix a.mix-preview { left: 50%; margin-left: 5px; } .mix-grid .mix a.mix-link { right: 50%; margin-right: 5px; } .mix-grid .mix a.mix-link:hover, .mix-grid .mix a.mix-preview:hover { color: #fff; padding: 9px 14px; text-decoration: none; border: solid 1px #eee; } /* Portrait tablet to landscape and desktop */ @media (min-width: 992px) { .mix-grid .mix.col-md-6.col-sm-6 .mix-details { height: 50%; } } @media (min-width: 768px) and (max-width: 991px) { .mix-grid .mix a.mix-link, .mix-grid .mix a.mix-preview { margin-top: 5px; } }