1. hboinnard
  2. Commercial Templates
  3. Tuesday, 04 June 2019
  4.  Subscribe via email
Hi Ciaran,

I hope you are well.

I would like to re-use the hover effect from the top menu (animation and background opacity). But it would trigger from a module, like J51_ImageHover:
- hover on an image or div (I am overriding the module layout) will darken the background of the page, or module surround
- the hover open a description <figcaption> that covers more than the original img:hover, to cover part of the page.

Could you point me to the right direction ?

Kind regards,
Hervé
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Hervé

All good on this end. I hope you are well.

Would you have a URL to an example of the elements to which you wish to add this effect?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Thank you very much for your reply.
I have made different demo to find a solution to my needs, but my implementation is still not satisfactory. So here is the demo so far.

The landing pages are similar, there are 5 of them, with a mind map looking, and each bubble displays some info on hover.
- the page is here, the animation (flip, blur, etc...) are not required, I will set them right if it gets a nice user experience
https://jnlcoach.dev.puma-it.ie/index.php/module-extensions/accueil-06-sliced-bubbles
- the result on hover, that I would like, is to have each of the bubbles expanding in the centre of the page, while the rest of the page is low opacity to focus on the bubble content. I tried to simulate the result on this page, CSS properties for simulation only, that is what I don't know how to link to the hover from the previous page!!
https://jnlcoach.dev.puma-it.ie/index.php/module-extensions/accueil-06
For some reasons, the page background is not opacified, it should like on menu item hover

My implementation so far:
I used a template override on the module ImageHover, and custom.css for the demo.
- the responsive view, for smaller screen, will have another background image (mind map) and different bubbles' positions
- I am not sure if the positioning of the bubbles, with left and top CSS properties in pixels is ideal, but it works. I way use constants and calculation in a stylesheet.less if it gets more complex.

Would you know how to get this result for this example? Then I could reproduce it for the other landing pages.
I understand that the solution might not be straight forward, so please let me know otherwise.

Kind regards,
Hervé

PS: the module override is simple, here it is, with two lines changed, in -- ++


<div class="j51imagehover j51imagehover<?php echo $j51_moduleid; ?>">
<?php foreach ($imagehover_images as $item) : ?><div class="j51imghvr-item">
-- <figure class="<?php echo $item->j51_imghvr; ?>">
++ <figure class="<?php echo $item->j51_imghvr . " " . $item->j51_image_alt; ?>">
-- <img src="/<?php echo $item->j51_image; ?>" alt="<?php echo $item->j51_title; ?>"
++ <img src="/<?php echo $item->j51_image; ?>" alt="<?php echo $item->j51_title; ?>" class="<?php echo $item->j51_image_alt; ?>"
<?php if (empty($item->j51_title) || empty($item->j51_text) || empty($item->image_url)) : ?>

References
  1. https://jnlcoach.dev.puma-it.ie/index.php/module-extensions/accueil-06-sliced-bubbles
  2. https://jnlcoach.dev.puma-it.ie/index.php/module-extensions/accueil-06
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
HI Hervé

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will make this amendment for you. For our reference please paste a link to this post in your email.

Presuming you plan to use the same module for other landing pages, the changes should apply to all.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Thank you very much for your kind offer!
I've sent an email with Administrator credentials to the website, with encrypted link.

And yes, my plan is to use the same module for other landing page. The background image and module content are different, and would be customised to cover the bubbles nicely, of course.

Please let me know if you need further details.

Kind regards,
Hervé
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Maidin mhaith Hervé

I have added some JS which should apply the background hover effect on an item with the class hover-background applied to it. I have added this class to your Imagehover override.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran, a chara,

Thank you very much for this addition. I am looking at the code now, and will apply to the other page!

Bain sult as an deireadh seachtaine!
Hervé
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok