En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.
 
 
 

GuppY, le CMS de référence sans base de données

 

telecharger.png

 
Vous êtes ici :   Accueil » Forum » Guppy 5 » Signaler une nouveauté sur des pavés images Hover effects
 
 
 
    Imprimer la page...
    Imprimer la section...

Attention : GuppY 5.03.01

Sortie de GuppY 5.03.01 :
 

Les zips du pack, du patch cumulatif et du patch non-cumulatif sont en téléchargement le 17.02.2020 à 16h00.


Le patch CKEditor v4121 pour GuppY 502xx (06.07.2019) est en téléchargement dans la rubrique Télécharger puis GuppY 5. Merci à Saxbar pour cette mise à jour.

Mise à jour des listes de blocage des spams (24.09.2019) pour Apache 2.3 et pour Apache 2.4 en téléchargement dans la rubrique Télécharger puis GuppY 5

Forum - Guppy 5 - Signaler une nouveauté sur des pavés images Hover effects


Connectés :
+
 


le 07/11/2019 @ 16:56
par Aramise

Aramise

12 messages

Bonjour à tous

j'utilise sur la page d'accueil de notre site des pavés d'image avec un effet de retournement au survol sur un texte (Hover effect repris sur le site de Jean-Denis (inspiré par tympanus.net)

Quelques unes de ces images sont sujettes à des mises à jour régulières dans le contenu de leur verso et j'aimerai donc pouvoir signaler à nos lecteurs qu'il y a une nouveauté d'info derrière l'image.

la première solution est sans doute d'incruster une icone du genre "New", mais un peu pénible à gérer au quotidien !

l'autre serait d'ajouter dans le code CSS un effet quelconque (tremblement de l'image ? ou autre). D'où peut-être une simple ligne à intégrer dans le code CSS ...

Mais je suis ne suis pas compétent pour trouver cette ligne magique !

Avez vous des idées ?

Merci d'avance

Jacques

Site web Aramise
sujet clos Haut  
Réponse n° 1
--------
le 08/11/2019 @ 06:42
par JeanDenis

JeanDenis

1407 messages

Bonjour Jacques,

Il me semble, a priori, qu'en effet, la solution la moins coûteuse en temps et en manipulations soit d'incruster une image "new" dans l'image front-img du procédé et de la renvoyer par FTP ou par l'intermédiaire de l'admin de GuppY. Cela ne devrait pas te prendre plus de deux minutes en tout...

Je chercherai cependant, s'il est simple de modifier le code afin de superposer une autre image sur l'image front-img...

Ceci étant dit... l'usage ici, veut que l'on adresse ce genre de demande directement sur le forum concerné... C'est déjà le cas pour les skins, les plugins...

Pour les astuces que je décortique (en indiquant toujours leur provenance, comme tu l'as signalé), auxquelles j'apporte très souvent des modifications et que je mets à disposition, rendez-vous donc sur le forum de mon site :

http://www.71site.fr/

Cordialement,

Jean-Denis


www.71site.fr

Site web JeanDenis
clos par Aramise le 08/11/2019 @ 16:17 Haut  
Réponse n° 2
--------
le 08/11/2019 @ 09:39
par JeanDenis

JeanDenis

1408 messages

Re,

Une solution "assez simple" peut être apportée :

ton code actuel est celui-là (par exemple) :

<div class="view view-first"><img id="front-img" src="img/accueil/Pave-AMS_350x350.jpg" />
....
</div>

modifie-le ainsi

<div class="view view-first"><span style="position: absolute; top:0px; left:0px;"><img id="front-img" src="img/accueil/Pave-AMS_350x350.jpg" /></span>
....
</div>

il n'y aura pas d'incidence sur le fonctionnement général...

et si tu souhaites ajouter une imagette de nouveauté ajoute simplement une balise span supplémentaire ainsi (en ajustant le nom, le chemin de l'image et sa position) :

<div class="view view-first"><span style="position: absolute; top:0px; left:0px;"><img id="front-img" src="img/accueil/Pave-AMS_350x350.jpg" /></span>
<span style="position: absolute; bottom:10px; right:10px;"><img id="front-img" src="img/accueil/new.gif" /></span>
....
</div>

ici, elle est placée en bas à droite à 10px du bord et elle subit (grâce à son id="front-img") la même transformation que l'image principale.

Je te remercie de m'avoir fait chercher cette astuce wink, et je complèterai le tutoriel pour en faire profiter, d'autres utilisateurs.

Rappel : Poster sur le forum de mon site http://www.71site.fr/ évite d'encombrer inutilement ce forum, réservé plutôt au fonctionnement de GuppY. Merci smile.

Bien cordialement,

Jean-Denis


www.71site.fr


Rectifié par JeanDenis le 08/11/2019 @ 09:41
Rectifié par JeanDenis le 08/11/2019 @ 09:43
Site web JeanDenis
clos par Aramise le 08/11/2019 @ 16:17 Haut  
Réponse n° 3
--------
le 08/11/2019 @ 12:18
par Aramise

Aramise

13 messages

Merci Jean-Denis

pas encore testé ta solution, mais j'imagine que ça va bien aller comme d'hab

de mon coté, j'ai trouvé une solution via la superposition d'un texte qui "clignote" via une animation sur l'opacité. Je vais le mettre sur ton forum

Et désolé pour le mauvais choix de forum !

Bonne journée

Jacques

Site web Aramise
clos par Aramise le 08/11/2019 @ 16:17 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum