Image avec un effet slide dessus

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image avec un effet slide dessus

Message par Plümpheit Lun 23 Oct 2017 - 1:18

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://l-obscure-clarte.forumactif.com/

Description du problème

Bonjour, ou plutôt bonsoir Smile

Je voudrais faire une modification d'une partie des images de ma PA. Je souhaitais que lorsque je passe mon curseur sur l'une d'elle, cette dernière "se décale" pour faire apparaître un texte dessous. Mais je sais pas du tout comment faire Sad

Un petit coup de main serait le bienvenu ^^"


Dernière édition par Plümpheit le Dim 19 Nov 2017 - 17:30, édité 4 fois
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Neptunia Lun 23 Oct 2017 - 1:25

Bonjour ^^


résolu Problème avec le code de ma PA

Ne touchez à rien, le lien mène directement sur le bon message !
MlleAlys détaille étape par étape comment faire !
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Lun 23 Oct 2017 - 2:14

Neptunia, vous tombez toujours à point! Merci.

Je clos le sujet et j'essaye le tuto de cette chère MlleAlys!

Encore merci ^^

EDIT: j'ai venu la peau de l'ours un peu trop vite! J'ai juste un petit soucis je n'arrive pas mettre les images côte à côte. Elles se mettent directement les unes en dessous des autres Sad

Image avec un effet slide dessus Pycb

Et voici les codes HTML pour commencer :
Code:

<div class="alicecaglisse">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
   <div class="texteglisse">
      Pouet tralal
   </div>
</div>

Et CSS:
Code:
.alicecaglisse{
position: relative;
 overflow: hidden;
  width: 75px;
  height: 75px;
}

.alicecaglisse-img{
position: absolute;
top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
transition: top 0.5s ease-out;
}

.alicecaglisse:hover .alicecaglisse-img{
  top:-100%;
}


.texteglisse{
  font-size: 10px;
  color: black;
}

(et oui je sais... j'étais pas inspirée pour le titre de la classe XD j'ai mis ce qui me passais pas la tête LOL)
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Mar 24 Oct 2017 - 1:12

je up, car j'ai clos trop vite ^^, j'ai encore un petit soucis! héhéhé

c'est ça que de placer la charrue avant les bœufs XD
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Neptunia Mar 24 Oct 2017 - 2:11

En fait c'est plus un problème d'image coulissante mais de positionnement des éléments.

Une div comporte d'office un saut de ligne avant et un autre après
Right Eléments de type Bloc - Mozilla Developer Network

Donc si on en place plusieurs de suite sans rien préciser, elles se placeront verticalement (contrairement aux éléments "en ligne" qui se positionnent en ligne, donc les uns à côté des autres.

Soit on change le flacon (et on garde l'ivresse) soit on positionne chaque élément. La solution de facilité serait de faire un tableau et de placer chaque div dans une cellule. J'ai voulu tenter autre chose sans faire de tableau

J'ai ajouté un autre cadre autour de l'ensemble :
Code:
<div class="flacon" style="width:170px;height:75px">
<div class="alicecaglisse" style="float:left">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
  <div class="texteglisse">
      Pouet tralal
  </div>
</div>
<div class="alicecaglisse" style="float:right">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
  <div class="texteglisse">
      Pouet tralal
  </div>
</div>
</div>
et ajouté un style à chacune des div alicecaglisse. L'une flotte à gauche, l'autre à droite.
Quant au flacon je lui ai attribué une largeur plus grande que la somme des deux contenus, afin de créer un espace entre les deux images.

Le résultat -> https://jsfiddle.net/oqdwgcjr/




Et désolée, je n'avais pas vu votre edit.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Jeu 26 Oct 2017 - 12:59

Merci, je verrais ça ce weekend ^^ J'ai repris le travail et j'ai donc moins le temps ^^"

Je vous tiens au courant Smile
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Mer 1 Nov 2017 - 13:47

Je up le sujet, non pas parce que j'attend une réponse, mais j'ai été malade et j'ai rien pu avancé. Je reviens vers vous ce weekend ^^
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Lun 6 Nov 2017 - 23:28

Je re up pour les même raisons Smile Promis je m'en occupe très vite ^^
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Dim 12 Nov 2017 - 11:20

Désolée du retard. J'ai été prise de migraine pendant 3 semaines. Une vraie horreur. Et les maux de crâne n'aident pas à coder je vous l'assure! Bref

J'ai (enfin) ré-étudier votre dernière réponse Neptunia. En fait si je comprends bien, il faudrait que je créer un bloc pour y mettre mes images, ou créer un tableau qui aura ce même effet, pour éviter que mes images se mettent les unes sous les autres ?

Sinon je tiens à vous remercier et aussi vous dire que vos réponses sont toujours très compréhensibles. Et j'ai bien apprécié la petite touche d'humour Wink

Donc moi j'ai ce bloc : (issu d'ailleurs d'un site que vous m'avez passé ^^ )
Code:
<!--        4 PREDEFINIS        -->     
      <div class="pfPOK">
                    
         <!--        I        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        II        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        III        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        IV        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        TITRE        --><span><strong>Prédéfinis</strong> à l'honneur</span>     
         <!--        V        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VI        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VIII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>    <br />
         <!--        IX        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        X        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        XI        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        XII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>   
      </div>

et le CSS lié à lui :
Code:
/* PREDEFINIS */
.pfPOK {
position:absolute; margin-top:250px; margin-left:200px;
width:550px; height:85px; text-align:left;
}
.pfPOK img{
margin:5px; width:75px; height:75px; border-radius:5px;
}
.pfPOK b{
display:block; font-weight:normal; font-size:42px;
}
.pfPOK span{
display:inline-block; vertical-align:top; margin-left:350px; padding-top:-15px; margin-top:-70px;
font-family:"Morpheus"; font-size:25px; text-transform:uppercase; text-align:center; line-height:30px;
color:black;letter-spacing: -0.1em;
}

Qu'est ce que je peux changer au niveau du bloc pour arrivé à l'effet de alicecaglisse, pour garder l'effet actuelle ?

Ou bien c'est mort et je crée un tableau ?
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Mar 14 Nov 2017 - 0:07

up ?
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Mer 15 Nov 2017 - 23:58

up ?
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image avec un effet slide dessus

Message par Plümpheit Dim 19 Nov 2017 - 10:12

up ^^

EDIT: c'est bon je me suis dérouillée avec les indications que j'avais déja
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum