PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 13/06/2018 11:55:27

Ecrivain77
Membre
Lieu : BRIE COMTE ROBERT
Inscription : 01/01/2018
Messages : 24
Site Web

[Résolu]Faire un focus sur une image

Bonjour,

J'aimerais faire un focus sur mes images de cette page
http://ecrivain77.fr/index.php?static20 … -muses-dev

voici mon code html

[== HTML ==]
<a href="#"><img src="/data/medias/inspiration/01.jpg" width="140" /><span class="focus"><img src="/data/medias/inspiration/01.jpg" /></span></a>

voici mon code css

[== CSS ==]
.focus{
display:none;
width:250px;
}

Seulement quand on passe la souris sur l' image on voit bien la main mais l'image grossit ne s 'affiche pas .

Merci

Dernière modification par Ecrivain77 (15/06/2018 07:14:14)


L'échec nous procure l'opportunité de recommencer plus intelligemment
Henry Ford

Hors ligne

#2 13/06/2018 15:03:39

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 068
Site Web

Re : [Résolu]Faire un focus sur une image

Quand tu promènes la souris au dessus de l'image, c'est normal qu'elle montre un doigt vu qu'on passe au dessus d'une ancre ( balise <a> ).

Quand j'utilise l'Inspecteur de mon panda roux, je vois que :
http://ecrivain77.fr/themes/theme-blogg … ate.min.js
est chargé avant Jquery comme indiqué dans la console JS

Et les 404 ont du succès :
http://ecrivain77.fr/themes/theme-blogg … plucss.css
http://ecrivain77.fr/themes/theme-blogg … js?ver=4.8

Sinon avec ces règles CSS, cela devrait mieux aller :

[== CSS ==]
.entry.clr img {
    transition: transform 1s ease;
}
.entry.clr img:hover {
    transform: scale(1.5);
}

Hors ligne

#3 13/06/2018 15:30:38

Ecrivain77
Membre
Lieu : BRIE COMTE ROBERT
Inscription : 01/01/2018
Messages : 24
Site Web

Re : [Résolu]Faire un focus sur une image

Bonjour bazooka07,

Merci pour ton code, super.
Le petit souci  , c'est que cela s'applique à toutes mes images, comme je voudrais vraiment augmenter seulement les images de la page
http://ecrivain77.fr/index.php?static20 … muses-dev#

Merci pour ton aide.


L'échec nous procure l'opportunité de recommencer plus intelligemment
Henry Ford

Hors ligne

#4 13/06/2018 16:00:07

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 1 068
Site Web

Re : [Résolu]Faire un focus sur une image

Dans le thème par défaut de PluXml, on trouve celui pour le modèle de la page statique dans le fichier themes/defaut/static.php :

[== PHP ==]
<article class="article static" id="static-page-<?php echo $plxShow->staticId(); ?>">

Hélas, dans le thème que tu utilises, il n'y a plus que cela :

[== PHP ==]
<article class="boxed clr">

Donc, on ne sait plus si on a affaire à une page statique. IL faudrait corriger comme ceci pour être plus sélectif avec les régles CSS :

[== PHP ==]
<article class="article static boxed clr" id="static-page-<?php echo $plxShow->staticId(); ?>">

Les régles CSS sont à modifier comme ceci

[== PHP ==]
article.static .entry.clr img {
    transition: transform 1s ease;
}
article.static .entry.clr img:hover {
    transform: scale(1.5);
}

Il est possible d'être encore plus sélectif, en ciblant une page statique particulière ou un modèle de page statique

Dernière modification par bazooka07 (13/06/2018 16:01:27)

Hors ligne

#5 14/06/2018 07:27:50

Ecrivain77
Membre
Lieu : BRIE COMTE ROBERT
Inscription : 01/01/2018
Messages : 24
Site Web

Re : [Résolu]Faire un focus sur une image

Bonjour bazooka07,

Merci pour ton aide.
Je vais faire les modifs.


L'échec nous procure l'opportunité de recommencer plus intelligemment
Henry Ford

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2018 PluXml.org, tous droits réservés