Text in Grid disappear by using Linked Grid??
Professional Joomla social template with metro design and JomSocial extension support.
Rate this topic: 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%;
}
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%;
}
-
- 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;
}
-
- 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?
-
- 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
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;
}
-
- 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
.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
-
- 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.
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.
-
- 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
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
-
- 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
Was this what You were asking for ?
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 ?
-
- 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!
.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!
-
- 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:
This is actually same text, so maybe try with this:
- Code: Select all
.gkGridElement .grid-overlay {
opacity: 0;
}
.gkGridElement:hover .grid-overlay {
opacity: 1;
}
-
- 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..
I have increased the background contrast..
-
- 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 ?
I'm sorry, I do not understand. Can You plese explain ?
-
- Moderator
13 posts
• Page 1 of 1