How to add title hover effect on gkphoto and gkicon?

Hello guys,

I'm just new to joomla and gavick and I would like to add an effect that will show the title of my custom html every time i hover my mouse on the gkphoto and gkicon grid. I attached the picture for you to see what would I like to achieve, it's just a sample. any color will do like background can be color gray and color white for text.

Thank you in advance!

By the way, my site is only accessible thru our local network. it is an intranet portal site.

I already tried the suggestion on this link, https://www.gavick.com/forums/music-sta ... lass-37968 and add the

Code: Select all

.gkPhoto > a::after { content: attr(title) !important; font-size: 16px; width: 100px; left: 35% }

on the custom css code under advance settings of msocial template, but it is not working.

Hello guys, i hope someone can help me on this. Thanks!

Hi

I'm afraid I do not understand. Can You please use our demo to show me where You want to show this title ? Here is our demo for (m)social https://demo.gavick.com/joomla25/msocial/

Hello!

Sorry for the confusion, I configured a Grid gk5 and uses gkPhoto and gkIcon classes for my grid.

My only objective is to display the title of the module whenever i hover my mouse on top of it.

Please look at the attachments one is my current config and the other one is what I want to achieve, thanks again.

Hi

Ok. I can try to do this, but I need to work on a live organism. Is there any way You can put site online and send me an access to joomla panel so I'll be able to work ?

Hello, I pm'ed you about the site and login details.

Thanks.

wow still no reply, i'm starting to regret buying this template.

no updates, no recommendation, nothing. it is very disappointing, can you just tell me what date should I expect your reply so I can stop checking this thread everyday.

Hi

Sorry, there was some glitch in automation system. I did not have Your question in my list.

Here is what I've added to modules HTML. It cannot use a title of the module, so titles had to be added manually.

Code: Select all

<div class="grid-overlay">Title goes here</div>

And here a code added to override.css file in template:

Code: Select all

.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%;
}


I use your GridOverlay example

I tray this Text value of my GridModul:

<a style="display:block" href="index.php/montessori">Test
<div class="grid-overlay">Maria Montessori</div></a>

The overlay and the link works, but the Text: "Maria Montessori” is not to see?!

What can I do?

Please help me. It is a site for a education-school without an honorary basis.

Hi

I'm sorry, but this is a super old thread and I do not remember what was it about. Can You please present Your case along with an url so I'll be able to see it in action ?