By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.
 
 
 

GuppY, the benchmark database free CMS

 

telecharger01.png

 
 
You are here :   Welcome » Forum » Guppy 5 » Signaler une nouveauté sur des pavés images Hover effects
 
    Print this page...
    Print this section...
 

Warning: GuppY 5.03.00

GuppY release 5.03.00 :
 

The zips of the pack, the cumulative patch and the non-cumulative patch are available for download.

The CKEditor v4121 patch for GuppY 502xx (06.07.2019) is available for download in the Download section and then GuppY 5. Thanks to Saxbar for this update.

The update of the spam blocking lists (24.09.2019) for Apache 2.3 and Apache 2.4 is available for download in the Download section and then GuppY 5.

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


Connected :
+
 


07/11/2019 @ 16:56
by 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

Web site Aramise
topic closed Top  
Answer n° 1
--------
08/11/2019 @ 06:42
by 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

Web site JeanDenis
closed by Aramise   08/11/2019 @ 16:17 Top  
Answer n° 2
--------
08/11/2019 @ 09:39
by 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
Web site JeanDenis
closed by Aramise   08/11/2019 @ 16:17 Top  
Answer n° 3
--------
08/11/2019 @ 12:18
by 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

Web site Aramise
closed by Aramise   08/11/2019 @ 16:17 Top  
active topic active   closed topic closed   Important! Important!   New New message
Correct Correct message   Close Close topic   Make sticky Make sticky  
Forum Topic  Forum