.text {
display: flex;
justify-content: center;
margin-top: 5vh;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.text:hover {
-webkit-transform: rotateX(35deg), translateY(-50%);
transform: rotateX(35deg), translateY(-50%);
}
.text:hover span {
color: #6ED204;
}
.text:hover span:nth-child(odd) {
-webkit-transform: skewY(15deg);
transform: skewY(15deg);
}
.text:hover span:nth-child(even) {
-webkit-transform: skewY(-15deg);
transform: skewY(-15deg);
/*background-color: #f9f9f9;
background-color: #6FD104;
color: #a6a6a6;*/
background-color: #f9f9f9;
color: #6ED204;
}
.text > span {
display: block;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
transition: color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
}
.text > span:first-child {
border-radius: 5px 0 0 5px;
}
O
U
R
P
A
R
T
N
E
R
S
/* Demo assets */
.touch .client-wrap .client.solid {
opacity: 1;
z-index: 5;
}
.touch .client-close.click-on {
pointer-events: auto;
z-index: 6;
}
.touch .client:hover .client-more-less::after {
opacity: 0;
}
.toggle-container {
text-align: center;
}
.toggle-wrap {
margin: 0 auto 20px;
display: inline-block;
clear: both;
text-align: center;
padding: 10px;
border-radius: 6px;
font-weight: bolder;
}
.toggle {
margin-right: 8px;
}
.touch div.minus.client-more-less::after {
background-color: rgba(255, 255, 255, 0);
}
.toggle-switch {
position: relative;
display: inline-block;
vertical-align: middle;
text-align: left;
cursor: pointer;
padding: 3px;
border-radius: 25px;
width: 42px;
background-color: rgb(122, 212, 68);
color: rgb(225, 225, 225);
-webkit-transition: .4s ease all;
-moz-transition: .4s ease all;
-ms-transition: .4s ease all;
-o-transition: .4s ease all;
transition: .4s ease all;
}
.switch {
float: right;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
}
.switched-off {
background-color: rgb(200, 200, 200);
}
.switched-off .switch {
margin-right: 15px;
}
.switch {
-webkit-transition: .2s ease all;
-moz-transition: .2s ease all;
-ms-transition: .2s ease all;
-o-transition: .2s ease all;
transition: .2s ease all;
}
/* End Demo Assets */
img[data-src] {
opacity: 0;
}
img {
opacity: 1;
}
* {
box-sizing: border-box;
}
body {
font-family: Sans-serif;
}
.overflow-wrapper img.show-image {
opacity: 1;
}
.client-wrap {
margin: 5% auto 0;
padding: 0;
max-width: 1280px;
width: 100%;
}
.client-wrap:hover > .client {
opacity: .25;
}
.opacity-focus:hover > .client,
.solid.client {
opacity: 1;
}
.opacity-focus .client {
z-index: 0;
}
.client {
vertical-align: middle;
position: relative;
margin: 5px;
max-width: calc(20% - 20px);
height: 100%;
width: 100%;
list-style-type: none;
display: inline-block;
text-align: center;
transition: .2s ease all;
}
.no-touch .client:hover,
.no-touch .opacity-focus .client:hover {
opacity: 1;
z-index: 2;
}
.client:hover .client-meta {
opacity: 1;
visibility: visible;
}
.client:hover .overflow-wrapper {
z-index: 5;
left: 0;
}
.touch .client:hover {
opacity: 1;
z-index: 2;
}
.client-meta {
position: absolute;
display: block;
visibility: hidden;
overflow: hidden;
text-align: center;
border-radius: 4px;
opacity: 0;
width: 100%;
min-height: 200px;
background-color: rgb(255, 255, 255);
text-align: left;
border: 1px solid rgb(228, 228, 228);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
-webkit-transition: .2s ease all;
-moz-transition: .2s ease all;
-ms-transition: .2s ease all;
-o-transition: .2s ease all;
transition: .2s ease all;
}
.touch .client-more-less,
.touch .client-close {
z-index: 2;
position: absolute;
left: calc(50% - 10px);
text-align: center;
top: 15px;
height: 26px;
width: 26px;
text-align: center;
border-radius: 50%;
line-height: 1.3;
font-weight: 600;
transition: .2s ease all;
}
.touch .client.reset .client-meta{
opacity: 0;
visibility: hidden;
}
.touch .client-more-less {
display: inline-block;
pointer-events: none;
z-index: 5;
background-color: rgb(234, 236, 236);
color: rgba(0, 0, 0, .5);
}
.touch .client-close {
z-index: 6;
background-color: transparent;
}
.client-close:hover ~ .client-meta {
opacity: 0;
visibility: hidden;
}
.client-close:hover ~ img.client-logo,
.client-more-less ~ img.client-logo {
width: 80%;
}
.touch .client-more-less::before,
.touch .client-more-less::after {
content: '';
background-color: rgba(0, 0, 0, .25);
padding: 0;
display: block;
border-radius: 3px;
position: absolute;
margin: 0 auto;
}
.touch .client-more-less::before {
margin: 11px 6px;
width: 14px;
height: 4px;
}
.touch .client-more-less::after {
margin: 6px 11px;
width: 4px;
height: 14px;
}
/* Responsive Reset */
.reset {
opacity: 1 !important;
}
.reset .client-logo {
width: 80% !important;
}
.touch .reset .client-more-less::after {
opacity: 1 !important;
}
/* End Responsive Reset */
.client:hover .client-logo {
width: 76%;
}
img.reset-logo {
width: 80%;
}
.project-list:hover .overflow-wrapper img,
.opaque {
opacity: 1;
}
.overflow-wrapper {
position: relative;
padding-top: calc(100% - 45px);
width: 100%;
display: inline-block;
z-index: 3;
overflow: hidden;
background-size: cover;
background-position: center;
transition: .2s ease all;
}
.overflow-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
padding: 1px;
border-radius: 4px 4px 0 0;
-webkit-transition: .15s ease all;
-moz-transition: .15s ease all;
-ms-transition: .15s ease all;
-o-transition: .15s ease all;
transition: .15s ease all;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.client-logo {
z-index: 1;
position: absolute;
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 50%;
width: 80%;
height: auto;
transition: .2s ease all;
-webkit-animation: fadein .8s;
-moz-animation: fadein .8s;
-ms-animation: fadein .8s;
-o-animation: fadein .8s;
animation: fadein .8s;
}
.white-bg {
background-color: rgb(255, 255, 255);
}
.project-list {
overflow: hidden;
max-height: 230px;
margin-top: calc(100% - 44px);
padding: 0;
margin-bottom: 0;
line-height: 1;
padding-top: 0;
padding-bottom: 20px;
text-align: center;
border-bottom: 4px solid rgb(189, 189, 255);
transition: .2s ease all;
}
.project-list:hover {
max-height: 270px;
}
.project-list:hover .bar {
max-width: 100%;
border-top: 4px solid rgb(189, 189, 255);
}
.project-list:hover {
border-bottom: 4px solid rgb(255, 255, 255);
}
.bar {
margin: 0 auto;
border: 0;
border-top: 4px solid rgb(232, 232, 232);
max-width: calc(100% - 30px);
transition: .2s ease all;
}
.project-list li {
cursor: pointer;
display: block;
text-align: center;
padding: 8px 10px;
font-size: .9rem;
}
.project-list li:hover {
color: rgb(100, 100, 100);
}
/* Sizes for demo */
.square {
padding: 20%;
}
.smaller {
padding: 10%;
}
/* End Sizes for demo */
@media screen and (max-width: 1024px) {
.client {
max-width: calc(25% - 30px);
}
}
@media screen and (max-width: 820px) {
.client {
max-width: calc(33.33% - 30px);
}
}
@media screen and (max-width: 620px) {
.client {
max-width: calc(50% - 30px);
}
}
@media screen and (max-width: 525px) {
.client {
float: none;
max-width: 260px;
width: 90%;
}
.client-wrap {
text-align: center;
}
}
/* Animation */
@-webkit-keyframes fadein {
from {
opacity: 0;
width: 65%;
}
to {
opacity: 1;
width: 80%;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
width: 65%;
}
to {
opacity: 1;
width: 80%;
}
}
@-ms-keyframes fadein {
from {
opacity: 0;
width: 65%;
}
to {
opacity: 1;
width: 80%;
}
}
@-o-keyframes fadein {
from {
opacity: 0;
width: 65%;
}
to {
opacity: 1;
width: 80%;
}
}
@keyframes fadein {
from {
opacity: 0;
width: 65%;
}
to {
opacity: 1;
width: 80%;
}
}
$('.no-touch .project-list li:nth-child(3), .no-touch .project-list li:nth-child(8)').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(1)').toggleClass('show-image');
});
$('.no-touch .project-list li:nth-child(4), .no-touch .project-list li:nth-child(9)').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(2)').toggleClass('show-image');
});
$('.no-touch .project-list li:nth-child(5), .no-touch .project-list li:nth-child(9)').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(3)').toggleClass('show-image');
});
$('.no-touch .project-list li:nth-child(6), .no-touch .project-list li:nth-child(10)').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(4)').toggleClass('show-image');
});
$('.no-touch .project-list li:nth-child(7), .no-touch .project-list li:nth-child(11)').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(5)').toggleClass('show-image');
});
// Reset
$('.touch .client-wrap').click(function(event){
var target = $( event.target );
if ( target.hasClass( "client-close" ) ) {
$('.client-wrap div.client').addClass('reset');
}
else{
$('.client-wrap div.client').removeClass('reset');
}
});
// White BG for client top
$('.no-touch .project-list li').hover(function(e) {
$(this).parents('.client-meta').next('.overflow-wrapper').toggleClass('white-bg');
$('.touch .client-wrap').toggleClass('.solid');
});
// David Walsh simple lazy loading
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
// For the demo
$('.hover .toggle-switch').click(function(e) {
$('.hover .toggle-switch').toggleClass('switched-off');
$('.client-wrap').toggleClass('opacity-focus');
});
Low opacity
- Some Example Project
- Another Project
- The Third and longer project name
- Fourth Project Name
- Another Name
- Some Example Project
- Another Project
- The Third and longer project name
- Fourth Project Name
- Another Name
- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
LG Corporation
- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
Logitech

- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
oculus

- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
Skype
- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
AMD
- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
Treehouse Island, Inc.

- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
Nickelodeon
- Some Example Project
- Another Project
- The Third Name
Toys "R" Us
- Some Example Project
- Another Project
- The Third Name
- Fourth Project Name
- Another Name
Uniqlo Co., Ltd.









AIRCOMIT
Aircom Systems Ltd Founded in 2010. The company has scaled its business to be one of the leading providers of technology products, solutions and services in Uganda. Over the last few years, Aircom has evolved from a supplier of IT products to a strategic partner to companies offering technology solutions
TwitterGithubCodePen













Previous
Next
