Tweet
Bonjour,
Sur la page d'accueil de Cassiopiea, on a l'image de la nuit étoilés sous les sapins en position bannière avec son texte d'annonce.
Je voudrais que cette image de module "bouge" avec du zoom css.
J'ai réussie avec le css : animation: scale 40s linear infinite
Le problème c'est que texte du module bouge aussi!
C'est "l'injection" de l'image du module qui pose problème car je n'arrive pas à le dissocier de son texte.
Le texte du module est dans la boite div "overlay" qui s'englobe avec les règles du backround-image.
J'ai bien cette solution qui marche mais il faudrait remplacer la balise img par l'injection backgroundimage du module.
Je sais pas faire,je bloque. Une aide s'il vous plaît? Merci
Sur la page d'accueil de Cassiopiea, on a l'image de la nuit étoilés sous les sapins en position bannière avec son texte d'annonce.
Je voudrais que cette image de module "bouge" avec du zoom css.
J'ai réussie avec le css : animation: scale 40s linear infinite
Le problème c'est que texte du module bouge aussi!
C'est "l'injection" de l'image du module qui pose problème car je n'arrive pas à le dissocier de son texte.
Le texte du module est dans la boite div "overlay" qui s'englobe avec les règles du backround-image.
J'ai bien cette solution qui marche mais il faudrait remplacer la balise img par l'injection backgroundimage du module.
Je sais pas faire,je bloque. Une aide s'il vous plaît? Merci
Code PHP:
<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* Copyright (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Uri\Uri;
$modId = 'mod-custom' . $module->id;
if ($params->get('backgroundimage')) {
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->addInlineStyle('
#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}
', ['name' => $modId]);
}
?>
<div class="mod-custom custom-banner" id="<?php echo $modId; ?>">
<div class="boxint">
<?php echo $module->content; ?>
</div>
</div>
<div class="imgbg">
<img src="images/gabarits/gab-slide-1.jpg" class="full zoom" alt="" />
</div>
Commentaire