duplicate shadow effect in Grid GK5

Hi,
I am implementing the Grid GK5 module on my Bluap theme, but have been unable to duplicate the shadow effect when hovering the mouse over its blocks, as seen on the (M) Social theme.
Is there a way to do this on this template?
Thank you.

Hello,

Which effect exactly do you mean?

On the live demo of the (M) Social template, when you hover the mouse cursor over the blocks on the grid, it creates a shadow effect.
When I installed Grid GK5 on my Bluap template this effect is not reproduced.

Please try to add the following code at the end of any CSS file:

Code: Select all

/*
 * GK Grid blocks
 */
 
/* Icons */
.gkIcon {
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkIcon > i {
   color: #fff;
   font-size: 84px;
   left: 0;
   line-height: 84px;
   margin: -42px 0 0 0;
   padding: 0;
   position: absolute;
   text-align: center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   top: 50%;
   width: 100%;
}
.gkIcon:hover { background: #272727!important; }
.gkIcon.gkColor4:hover > i { color: #fff!important; }
.gkIcon.gkColor1 { background: #db4a37; }
.gkIcon.gkColor2 { background: #272727; }
.gkIcon.gkColor3 { background: #888; }
.gkIcon.gkColor4 { background: #fff; }
.gkIcon.gkColor4 > i { color: #272727; }
.gkIcon.gkColorFb { background: #3b5998; }
.gkIcon.gkColorTwitter { background: #00aced; }
.gkIcon.gkColorGplus { background: #db3a37; }

/* Photos */
.gkPhoto {
   background-size: cover;
   background-position: center center;
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkPhoto > a {
   height: 100%;
   opacity: 1; filter: alpha(opacity=100);
   position: absolute;
   text-indent: -9999px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   width: 100%;
}
.gkPhoto > a:hover {
   opacity: 0.85; filter: alpha(opacity=85);
}
.gkPhoto > h3,
.gkPhoto > h4 {
   color: #fff;
   font-size: 36px;
   font-weight: 300;
   line-height: 1.1;
   padding: 30px 40px;
}
.gkPhoto > h4 {
   font-size: 24px;
   padding: 20px 30px;
}
.gkPhoto > h3 > a,
.gkPhoto > h4 > a {
   color: #fff;
}
.gkPhoto > h3 > a:active,
.gkPhoto > h3 > a:focus,
.gkPhoto > h3 > a:hover,
.gkPhoto > h4 > a:active,
.gkPhoto > h4 > a:focus,
.gkPhoto > h4 > a:hover,
.gkPhoto > .gkTextBlack > a:active,
.gkPhoto > .gkTextBlack > a:focus,
.gkPhoto > .gkTextBlack > a:hover {
   color: #db4a37;
}
.gkPhoto > h3 strong,
.gkPhoto > h4 strong {
   display: block;
   font-weight: 500;
}
.gkPhoto > .gkTextBottom {
   bottom: 0;
   position: absolute;
}
.gkPhoto > .gkTextTop {
   position: absolute;
   top: 0;
}
.gkPhoto > .gkTextBlack,
.gkPhoto > .gkTextBlack > a {
   color: #272727;
}
.gkPhoto {
opacity: 1; filter: alpha(opacity=100);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.gkPhoto:hover {
opacity: 0.7; filter: alpha(opacity=70);
}

/* Videos */
.gkVideo {
   height: 100%;
   position: absolute;
   width: 100%;
}
.gkVideo > iframe {
   height: 100%!important;
   position: absolute!important;
   width: 100%!important;
}

/* Text & Headers */
.gkText {
   background: #db4a37;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   height: 100%;
   padding: 25px;
   position: absolute;
   width: 100%;
}
.gkText.gkColor1 { background: #db4a37; }
.gkText.gkColor2 { background: #272727; }
.gkText.gkColor3 { background: #888; }
.gkText.gkColor4 { background: #fff; }
.gkText.gkColor4 h1,
.gkText.gkColor4 h2,
.gkText.gkColor4 h3,
.gkText.gkColor4 h1 a,
.gkText.gkColor4 h2 a,
.gkText.gkColor4 h3 a,
.gkText.gkColor4 h1 > i,
.gkText.gkColor4 h2 > i,
.gkText.gkColor4 h3 > i,
.gkText.gkColor4 p { color: #272727; }
.gkText.gkColor4 h1 a:hover,
.gkText.gkColor4 h2 a:hover,
.gkText.gkColor4 h3 a:hover {
   color: #db4a37;
}
.gkText.gkColorFb { background: #3b5998; }
.gkText.gkColorTwitter { background: #00aced; }
.gkText.gkColorGplus { background: #db3a37; }
.gkText h1,
.gkText h2,
.gkText h3 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   line-height: 1.2;
   margin: 0;
   padding: 0;
}
.gkText h1 > i,
.gkText h2 > i,
.gkText h3 > i { color: #fff; }
.gkText p {
   color: #fff;
   font-size: 14px;
}
.gkText h1,
.gkText h1 a {
   color: #fff;
   font-size: 40px;
}
.gkText h2,
.gkText h2 a {
   color: #fff;
   font-size: 32px;
}
.gkText h3,
.gkText h3 a {
   color: #fff;
   font-size: 24px;
}
.gkText h1 a:hover,
.gkText h2 a:hover,
.gkText h3 a:hover {
   color: #ffb1ae;
}
.gkCentered {
   left: 0;
   padding: 0 25px;
   position: absolute;
   text-align: center;
   top: 50%;
   width: 100%;
}
.gkText h1.gkCentered {
   margin-top: -24px;
}
.gkText h2.gkCentered {
   margin-top: -20px;
}
.gkText h3.gkCentered {
   margin-top: -15px;
}

It is responsible for styling of the Custom HTML elements in the Grid.

Can I add it to the css override?

Yes you can

I just did that, and it worked for the social icons, such as the fb, g1 and twitter, (ex: <a class="gkIcon gkColorFb" href=""><i class="icon-facebook"></i></a>) but not for common pictures (ex: <p><a href="index.php?option=comxyz"><img src="images/xyz.jpg" /></a></p>) .
Do I need to use a specif module suffix for that?

You have to use the gkPhoto class

I tried, it makes no difference. Is GkPhoto a class included on Bluap?

Please change your back-end editor to "None" and then please edit the module and please remove the paragraph wrapper around the link with the image.

Gotcha!
One last question (and I hope I am not pushing it here):

In the M Social template, the blocks showing text instead of pictures (such as the second and sixth block on the demo site), have its contents centered within the square as if some sort of invisible margin or border had been assigned.

I tried changing the grid border and grid margin on the Grid module, but it made no difference. When I add any text, the words are very close to the edge and look very weird, rather than well placed in the center as on the Social demo.

Do you know what I am talking about? Is there a way to accomplish this on the Bluap theme, or is this a Typography discrepancy maybe?

Please look at the structure of the interesting parts using Firebug / Chrome Dev Tools (using Inspect element) - you have now in your page all the custom HTML CSS in your CSS so the only necessary thing is proper HTML structure.