duplicate shadow effect in Grid GK5

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sat Jun 28, 2014 10:01 pm
Reply with quote
Report this post
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.
User avatar
Senior Boarder

GK User
Sun Jun 29, 2014 8:22 pm
Reply with quote
Report this post
Hello,

Which effect exactly do you mean?
User avatar
Administrator

GK User
Sun Jun 29, 2014 11:21 pm
Reply with quote
Report this post
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.
User avatar
Senior Boarder

GK User
Mon Jun 30, 2014 7:50 am
Reply with quote
Report this post
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.
User avatar
Administrator

GK User
Mon Jun 30, 2014 9:07 am
Reply with quote
Report this post
Can I add it to the css override?
User avatar
Senior Boarder

GK User
Mon Jun 30, 2014 9:15 am
Reply with quote
Report this post
Yes you can :)
User avatar
Administrator

GK User
Mon Jun 30, 2014 9:22 am
Reply with quote
Report this post
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?
User avatar
Senior Boarder

GK User
Tue Jul 01, 2014 7:36 am
Reply with quote
Report this post
You have to use the gkPhoto class
User avatar
Administrator

GK User
Tue Jul 01, 2014 7:41 am
Reply with quote
Report this post
I tried, it makes no difference. Is GkPhoto a class included on Bluap?
User avatar
Senior Boarder

GK User
Tue Jul 01, 2014 7:57 am
Reply with quote
Report this post
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.
User avatar
Administrator

GK User
Tue Jul 01, 2014 8:13 am
Reply with quote
Report this post
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?
User avatar
Senior Boarder

GK User
Tue Jul 01, 2014 6:25 pm
Reply with quote
Report this post
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.
User avatar
Administrator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.