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

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)) : ?>

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

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é

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

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é