Blog d'aide de Blog4ever

Bonjour, 

Je tente cette prouesse depuis quelques jours, sans succès, 
Le hic, c'est l'association avec selon les propositions, le css et, ou le script jq ou js associé, 
Sur la plateforme d'où je viens, Mon image rétractable était dans un champ qui apparaissait sur plusieurs pages, Là je ne le veux que dans un article, plus précisément dans un tableau, 
Il était fait d'un script js intégré dans un template et d'un css associé, 
Comme le tableau est gérer en html, je cherche dans cette direction, mais il y a toujours du css associé, comment faire pour que ça ne soit pris que dans un article  ou plusieurs au choix, mais pas tous? 
J'ai pensé à un lien qui renverrait au code, mais je doute du résultat, 

Merci de m'aider, 
Bonne journée, 
Mi Neth, 

Si ça peut aider , je joins mon css de l'époque, C'était pour un avatar, mais je suppose qu'il serait compatible en version image, 

/* avatar couliss profil */ .profilperso{    width: 200px;         height: 355px;       overflow: hidden;} .vava{-webkit-transition: 1s;    margin-top: -100px;    position: relative;    transition: 1s;    top: -140px;} .vava img {    height: 300px;     width: 200px; transition: 1s all ease;} .vava:hover img {margin-left: 200px;} .pseudo_mess{    position: relative;  top: -15px;   } .rang_mess{position: relative;        top: -20px; } .profil_mess{height: 241px;         width: 200px;     display: block;}/*fin de code avatar */

Dernière modification le mercredi 06 Mai 2020 à 22:49:52

Bonjour Mi Neth,

Je n'ai pas la réponse à ton problème.

Mais quand tu dis :

"J'ai pensé à un lien qui renverrait au code, mais je doute du résultat"

il y a un moyen simple de lever ce doute : tu crées un blog test chez B4E et tu essayes.

Désolé de ne pas pouvoir t'aider davantage !

:bd: Mi Neth

Oh la la ! ta question est un casse-tête chinois

Je vais y aller petit à petit car c'est brouillon

 (comprend pas.)



Pour installer ton code css que dans un article coche HTML dans cet article.
tu mes ce code çi-dessous sans les * et tu installes ton code css entre

<*style type="text/css"*><*!--

--><*/style*>




Seulement pour info Le codes css de plate forme d'ou tu viens est différent

sur blog 4ever pour faire un effet sur l'avatar c'est ce code

/*partie avatar membres*/ 
.avatar {
  } 
.avatar:hover
{ 


 car je pense que le code de l'avatar de cette platforme est

vava{
.vava img { 
.vava:hover img {


Je ne vois pas de code effet retractable

vava{-webkit-transition: 1s;    margin-top: -100px;    position: relative;    transition: 1s;    top: -140px;} .vava img {    height: 300px;     width: 200px; transition: 1s all ease;} .vava:hover img {margin-left: 200px;}

La propriété margin définit la taille des marges sur les quatre côtés de l'image


Il faudrait nous montrer un exemple de ce que tu veux.

Pour moi faire un effet rétractable au passage de la souris serais.
De faire  2 images identique dont la 2'éme serais plus petite (hover) avec un temps de transition

Dernière modification le jeudi 07 Mai 2020 à 12:35:04

:bd:

Que c'est embrouillé et complexe tout ça.
Demandons à notre expert @simon@ s'il peut faire quelque chose.

!!mu

 J' ai trouvé un code qui normalement était un code pour un effet de zoom sur l'image et en réduisant la longueur de l'image sur hover fait un effet contraire rétractable


Voici le code à installer dans l'article de ton tableau 
tu mes ce code çi-dessous sans les * 


<*style type="text/css"*><*!--

.full{ width: 250px;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.full:hover{   -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
.full:hover{  width:
150px;  }

--><*/style*>

pour

.full{ width: 250px; c'est la longueur de ton image
.full:hover{  width:150px; c'est la longueur de ton image au passage de la souris

Tu n'as plus qu' a changer les valeurs en gras pour les tailles que tu désires



Et maintenant pour l'image, tu mets ce code dans ton tableau sans les * 

<*img class="full" adresse de ton image"*>




Dernière modification le jeudi 07 Mai 2020 à 15:07:59

Bonsoir à tous les trois et merci pour vos retours, 

J'ai mis le css que j'avais utilisé à l'époque et qui était pour mon avatar pour que vous ayez une idée plus précise de ce que je cherche à faire, mais là c'est bien pour une image dans un article et plus particulièrement un tableau que je souhaite donner le rendu d'un texte qui apparaît derrière une image qui disparaît, 

J'ai testé la proposition de Stef, sans résultat, Dommage parce que je pense que cet effet aussi pourrait m'intéresser pour un autre article, 

A partir de sa proposition, j'ai tenté ceci, 

<*style type="text/css"*><"!--div.contenant {    width:760px;      height:560px;     overflow: hidden;} div.contenu {    width: 760px;     height: 560px;     overflow: auto;  }.contenant img {    width:760px;     height:560px;      position: relative;      bottom: 560px;     transition: 0.5s; .contenant:hover img {  /*au survol de la souris sur le bloc*/    bottom: 1120px;     transition: 0.5s; }--><*/style*>

<*div class="contenant"*>        <*/div*>
J'ai obtenu que les texte et image s'affichent , mais sans transition, 
Mais au moins, les deux se sont affichés, 

Merci, pour l'aide, je n'ai pas trouvé de modèles à vous montrer, 
Pour expliquer, l'image disparaît lorsque la souris passe et un texte apparaît, la plupart du temps, la transition se fait vers le haut ou le bas, Moi, je la voudrait vers la gauche ou la droite, et lorsque la souris repasse, l'image revient et cache le texte, 
J'espère avoir expliqué au mieux, 
Bonne soirée, 

Mi Neth, 

Dernière modification le vendredi 08 Mai 2020 à 19:33:38

:b1: Mi Neth

Pour le code faire un  effet rétractable il faut le modifier le code html de l'image



 change par sans les * 

<*div class="full"*><*img src="adresse de ton image"*><*/div*>


Je viens  faire l'essaie avec le code et  ça fonctionne en passant la souris sur mon image celle si se rétracte  Ici



Dernière modification le vendredi 08 Mai 2020 à 23:53:43

Bonjour Stef, 

Je n'ai pas pu voir, je tombe sur Cet article n'est pas disponible, 

Ce n'est pas grave, je vais testé dès que je le peux et je reviens te dire, 

Passe un bon samedi, 
Mi Neth, 

 Mi Neth

Ah oui c'est ma faute.
j'ai enregistré l'article en brouillon.C'et bon je l'ai mis en ligne l'article est visible.

Bon samedi :sol:

Vu, sympa, 

Ce n'est pas ce que je cherche à faire, mais je garde cette option pour un autre article, 
Je vais tout de même le tester, pour être certaine que le moment  venu, il fonctionnera, 

Merci à toi, 

Testé, ça fonctionne plutôt bien, Si ce n'est que mis dans un tableau, ça rétracte, aussi, celui-ci, 

Je continuerai mes recherches pour l'image qui laisse apparaître un texte, puis le cache au passage de la souris ou au clic, plus tard, 
Là, je vais finir les images de mon article à venir, 

Encore merci, 

re Mi Neth

Il faut fixer la taille de la cellule de ton tableau pour que celle-ci ne ce rétracte pas en même temps que l'image au passage de la souris


par exemple : td{ width : 250px; height: 110px; }.

Merci Stef, En effet, c'est mieux, J'avais oublié de fixer une taille, 

Reste plus qu'à trouver comment faire ce que je cherche, 

Bon dimanche, 

:bd:

@stef@ :am:
Bravo car tes codes sont très bien.

_________________________

Ce genre de tableau n'est pas si simple car dans un cadre il faut faire des codes  css et modifier la partie html.

Voici un exemple de tableau avec image rétractable.

https://labodeSimon.blog4ever.com/image-retractable

Bonjour, Simon, 

Je me suis male exprimée dès le départ, 
Cela dit, j'ai l'intention d'exploiter la proposition de Stef, 

Ce que je veux c'est une image qui recouvre un texte, puis disparaît au passage de la souris, laissant apparaître le texte et revient le cacher, lorsque la souris qui la zone, 

C'est ce que faisait mon avatar, il cachait les données de profil, 
Là je voudrais que ce soit une image dans un article, via un tableau de préférence, qui recouvre et dévoile un texte au passage de la souris, 

Je continue les recherches de mon côté, 

Bonne soirée, 
Mi Neth,