[Résolu]Faire un focus sur une image

Ecrivain77 · juin 2018

Bonjour,

J'aimerais faire un focus sur mes images de cette page
http://ecrivain77.fr/index.php?static20/images-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

bazooka07 · juin 2018

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-blogger/js/jquery-migrate.min.js
est chargé avant Jquery comme indiqué dans la console JS

Et les 404 ont du succès :
http://ecrivain77.fr/themes/theme-blogger/css/plucss.css
http://ecrivain77.fr/themes/theme-blogger/js/scripts.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);
}

Ecrivain77 · juin 2018

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/images-muses-dev#

Merci pour ton aide.

bazooka07 · juin 2018

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

Ecrivain77 · juin 2018

Bonjour bazooka07,

Merci pour ton aide.
Je vais faire les modifs.

[Résolu]Faire un focus sur une image

Réponses