Text in Grid disappear by using Linked Grid??

Professional Joomla social template with metro design and JomSocial extension support.
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
Thu Mar 17, 2016 11:28 pm
Reply with quote
Report this post
I use your GridOverlay example from

https://www.gavick.com/forums/m-social/ ... icon-46390

and this in my GridModulValue:
<a style="display:block" href="index.php/montessori">
<div class="grid-overlay">Maria Montessori</div></a>

The overlay and the link works, but the Text: "Maria Montessori” is not to see?!
In all Grids the Text disappears, but seen in WebInspector??

What can I do?

I add this in override.css

.gkGridElement .grid-overlay {
  position: absolute;
  background-color: #ddd;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-size: bold;
  color: #fff;
  width: 100%;
  padding: 20px;
  height: 15%
  transition: all 0.4s ease-out 0s;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  text-align: left;
  bottom: 0;
}

.gkGridElement:hover .grid-overlay {
  height: 100%;
  font-size: 22px;
  text-align: center;
  padding-top: 45%;
}
User avatar
Fresh Boarder

GK User
Thu Mar 17, 2016 11:35 pm
Reply with quote
Report this post
My HomePage:

http://www.mmge-ac.de/omega/
Username: you
Password: joinIn!
User avatar
Fresh Boarder

teitbite
Wed Mar 23, 2016 10:17 am
Reply with quote
Report this post
Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all
.gkGridElement .grid-overlay {
text-indent: 0;
}
User avatar
Moderator

GK User
Wed Jun 01, 2016 10:32 pm
Reply with quote
Report this post
Thanks the Text is shown, but it is behind the GridOverlay after the expanding?
User avatar
Fresh Boarder

teitbite
Mon Jun 06, 2016 7:10 pm
Reply with quote
Report this post
Hi

No it's the animation. It's using the exact same text, so if You wish to get rid of it and keep text same place remove this from override.css

Code: Select all
.gkGridElement:hover .grid-overlay {
    font-size: 22px;
    height: 100%;
    padding-top: 45%;
    text-align: center;
}
User avatar
Moderator

GK User
Wed Jul 06, 2016 9:00 pm
Reply with quote
Report this post
if I remove this

.gkGridElement:hover .grid-overlay {
font-size: 22px;
height: 100%;
padding-top: 45%;
text-align: center;
}

and than my animation is deactivate, but I wold like the text with the animation without the first hover
User avatar
Fresh Boarder

teitbite
Fri Jul 08, 2016 11:14 am
Reply with quote
Report this post
Hi

I'm afraid I do not understand now. Also Your site is showing 404 page cannot be found message at the moment, so I'm not able to check.
User avatar
Moderator

GK User
Sun Aug 21, 2016 10:58 pm
Reply with quote
Report this post
The Label is in Front before you hover the grid.
But if you hover the Grid the Label goes behind the hoverLayer.
http://www.mmge-ac.de

I want the textLabel always in Front.

Thanks,

Damian
User avatar
Fresh Boarder

teitbite
Mon Aug 22, 2016 3:52 pm
Reply with quote
Report this post
Hi

Still do not understand what You mean by "label is behind a layer". HTML is pretty straight here. There is one layer and a link with title inside it. Image as a background.

If You mean to get rid of the hover animation when title moves to center please remove this code from override.css

Code: Select all
.gkGridElement:hover .grid-overlay {
    font-size: 22px;
    height: 100%;
    padding-top: 45%;
    text-align: center;
}


Was this what You were asking for ?
User avatar
Moderator

GK User
Sat Sep 17, 2016 11:33 pm
Reply with quote
Report this post
No if I remove :

.gkGridElement:hover .grid-overlay {
font-size: 22px;
height: 100%;
padding-top: 45%;
text-align: center;
}

the new overlay with text does't work. I will only remove the first overlay.

Now I have two overlays:
1. the white overlay over the grid
2. the animated overlay with text in the grid

If it is possible I will delete the first one.

Thanks for helping!
User avatar
Fresh Boarder

teitbite
Sun Sep 18, 2016 11:44 am
Reply with quote
Report this post
Hi

This is actually same text, so maybe try with this:

Code: Select all
.gkGridElement .grid-overlay {
    opacity: 0;
}

.gkGridElement:hover .grid-overlay {
    opacity: 1;
}
User avatar
Moderator

GK User
Mon Sep 19, 2016 9:19 pm
Reply with quote
Report this post
Ok Thanks! But the opacity of the text is quit weak... as would be a layer above?
I have increased the background contrast..
User avatar
Fresh Boarder

teitbite
Wed Sep 21, 2016 11:27 am
Reply with quote
Report this post
Hi

I'm sorry, I do not understand. Can You plese explain ?
User avatar
Moderator


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