Infos derrière image PA

[sweetheart29]

Bonjour à vous !

Ma recherche ayant été vaine, j'ai décidé d'ouvrir un sujet pour vous exposer ma question !

Je souhaiterai avoir cet effet-là pour les images de mon staff sur ma PA : http://believe-in-magic.actifforum.com/
Comme vous le voyez, lorsqu'on passe la souris dessus, l'image se lève et on découvre les infos. Idem pour l'image "évènement". J'imagine qu'il doit falloir entourer l'image avec une div class, et ajouter un code dans la feuille de CSS ... Oui mais quel est ce code ?

Merci d'avance pour votre aide !

[Arc-En-Ciela]

Bonjour,

Pour le staff, il s'agit en effet de mettre une div class sur le texte. La description CSS indique que votre texte est totalement transparent, mais qu'il devient 100% opaque lorsque l'on passe la souris sur l'emplacement du texte. En l'occurrence, si le texte se trouve avec un background en image, on verra l'image, jusqu'à ce que la souris passe dessus pour rendre le texte opaque.

Code:

.nomdeladiv { opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0); }

.nomdeladiv:hover { opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100); }

Cela dit, vous pouvez changer l'opacité de l'apparition si vous le souhaitez pour garder un peu du background derrière (en changeant la valeur du 1 et du 100, ces différentes valeurs étant pour différents navigateurs).

Voici un code pouvant vous aider si vous ne savez pas comment mettre une image en background. Idéalement, vous devriez aussi ajouter la taille de la boîte (width: Ypx; height: Ypx) et ajouter cette taille dans le CSS pour la div du texte, histoire que tout soit de la même taille et se superpose bien.

Code:

<div style="background: url(IMAGE) center center no-repeat;">
<span class="nomdeladiv">VOTRE TEXTE</span></div>

Je ne suis pas spécialisée en codage, il se pourrait qu'il manque certaines informations,

Cordialement,
Ciela

[benneke]

Bonjour,

une solution simple mais jolie en CSS3 (pour les nouveaux navigateurs)

Dans le HTML :

Code:

<div class="view view-fifth">
    <img src="1.jpg" />
    <div class="mask">
    <h2>Title</h2>
    <p>Your Text</p>
        <a href="#" class="info">Read More</a>
    </div>
</div> 

Dans le CSS:

Code:

/* CSS Document */

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

.view-fifth img {
    -moz-transition-delay: 0s;
    -moz-transition-duration: 0.3s;
    -moz-transition-property: all;
    -moz-transition-timing-function: ease-in-out;
}
.view-fifth .mask {
    -moz-transform: translateX(-300px);
    -moz-transition-delay: 0s;
    -moz-transition-duration: 0.3s;
    -moz-transition-property: all;
    -moz-transition-timing-function: ease-in-out;
    background-color: rgba(146, 96, 91, 0.3);
    opacity: 1;
}
.view-fifth h2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: 0 1px 3px rgba(159, 141, 140, 0.5);
    color: #000000;
}
.view-fifth p {
    -moz-transition-delay: 0s;
    -moz-transition-duration: 0.2s;
    -moz-transition-property: all;
    -moz-transition-timing-function: linear;
    color: #333333;
    opacity: 0;
}
.view-fifth:hover .mask {
    -moz-transform: translateX(0px);
}
.view-fifth:hover img {
    -moz-transform: translateX(300px);
}
.view-fifth:hover p {
    opacity: 1;
}


source ici !

N'oubliez pas d'adapter les tailles par rapport à votre image !

Bonne journée

[sweetheart29]

Merci pour vos deux réponses, malheureusement je n'arrive pas à integrer vos codes à ma PA. Je vous explique : On m'a donné les codes d'une PA toute faite, cependant en oubliant de me fournir le CSS qui va avec...

Voilà le code de ma PA :

et si vous voulez voir l'effet, c'est ici :

J'ignore où placer les codes que vous m'avez donné, car ils sont très différent de ceux déjà présents ...

Merci d'avance pour votre aide

[Arc-En-Ciela]

Bonjour,

Avant de vous donnez le code, j'aimerais savoir si les deux forums vous appartiennent et si le/la codeur/codeuse vous permet de reprendre ses codes. Ou si simplement vous avez le droit de reprendre ce code de PA. « Je rappelle : Les demandes afin de copier une grande partie d'un forum ne sont pas acceptées, mais vous pouvez apprendre le CSS, HTML, JavaScript afin de pouvoir faire preuve de votre propre créativité et si vous avez un problème, posez alors la question sur le forum. » Je sais que ce que vous nous demandez est seulement une mince partie du codage de la PA, mais celle-ci reste indubitablement un copier/coller.

Cordialement,
Ciela

[sweetheart29]

Bonjour !
Believe In Magic n'est pas mon forum, cependant j'ai demandé l'autorisation à la codeuse, c'est elle-même qui m'a envoyé le code de sa PA. Elle me laisse la liberté de le remanier comme je le souhaite, ou de ne rien changer ... Toutefois elle ne m'a pas donné la partie CSS pour me faire un peu travailler, elle s'est elle-même qualifiée de sadique !
Rewrite True Blood est mon forum, et Falling Skyes est le forum test !

J'espère avoir répondu à vos question !

[benneke]

Euh, ben le souci est surtout de bien rediriger vers ton forum a toi...

Ici tu n'as fait qu'un copier/coller de son code sans vraiment le comprendre je pense....

Je peux t'aider a l'intégrer pour ton forum, mais il va me falloir une ligne a suivre pour pouvoir t'aider correctement...
Le code que je t'ai fillé doit se mettre a la place de l'image que tu souhaites voir partir au survol de la souris pour montrer le texte derrière, maintenant a toi de regarder ou il doit venir, et surtout d'adapter les tailles etc...
En d'autres termes comprendre le code qui a été fourni ...

Bonne soirée/début de semaine,
Ben

[sweetheart29]

Oui je l'ai copié collé et je n'ai pas encore fais toutes les modifications nécessaires pour l'adapter à mon forum car je pensais d'abord m'occuper de ces effets manquants. Est-ce gênant ?
Je pense avoir compris le code, seulement je ne suis pas capable d'en faire ce que je veux, je ne suis pas assez douée pour ça ^^

[Invité]

un détail ce code est en CSS3 et ne fonctionnera pas sur IE inférieur à la version 9 ...

merci microsoft les gens sous XP et il y en a encore beaucoup peuvent s'assoir sur le CSS3

[sweetheart29]

Merci de m'informer de ce détail, je le préciserai aux membres !

[benneke]

Oui je l'ai copié collé et je n'ai pas encore fais toutes les modifications nécessaires pour l'adapter à mon forum car je pensais d'abord m'occuper de ces effets manquants. Est-ce gênant ?
Je pense avoir compris le code, seulement je ne suis pas capable d'en faire ce que je veux, je ne suis pas assez douée pour ça ^^

Ce n'est pas gênant en soi, mais cela fait un double travail (rechercher et adapter les effets au code, puis réadapter le code (donc aussi ce qu'on vient d'adapter) pour ton forum, moi j'aurais travaillé dans l'autre sens, mais ce n'est que mon point de vue
Je vais te refaire le code avec la transition comme je l'ai faite, et tu pourra tester sous IE

un détail ce code est en CSS3 et ne fonctionnera pas sur IE inférieur à la version 9 ...

merci microsoft les gens sous XP et il y en a encore beaucoup peuvent s'assoir sur le CSS3

Oui effectivement, du CSS3. C'est exact que les version antérieures à IE9 ne prennent pas le CSS3 en charge, et IE9 ne prend qu'une infime partie du CSS3.
Par contre, il me semble qu'ils sont simplement ignoré, mais le fondement du code fonctionne.
Firefox, Safari, Chrome et Opera fonctionnent tous sur XP et permettent le CSS3, je conseille a tous de virer IE, mais c'est un point de vue personnel (facile de mon côté, je suis sur MAC )
EDIT : IE9 ne prend pas cette transition en compte, et je dois dire que le site de believe in magic ne donne pas non plus dans IE9

[sweetheart29]

Quand tu parles d'adapter la PA à mon forum, moi je comprends changer les images, le texte et tout ça. On parle de la même chose ? Si oui, une fois les effets mis en place, j'aurais juste à remplacer les textes et les images déjà présentes.

Merci beaucoup pour ton aide en tout cas !

[benneke]

Rebonsoir,

pour les effets, le CSS pourrait ressembler à ceci :

Code:

.pa-couleur{background-color:#FCFCF9;}
           
.fond{
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background-color: #FCFCF9;
border-top: 1px solid #EDEDDD;
border-bottom: 1px solid #EDEDDD;
border-right: 1px solid #EDEDDD;
border-left: 1px solid #EDEDDD;
}


a.imginfo {
border-bottom:0 dotted #C1C7B8;
color: #F08D43;
position:relative;
text-decoration:none;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
 -moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
cursor:help;
z-index: 999;
}
a.imginfo:hover span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-color: #ffffff;
border-style:solid;
border-width:1px 1px 2px 2px;
display:inline;
position:absolute;
top:15px;
white-space:nowrap;
    top: -75px;
    left: 5px;
    height: 80px;
    width: 100px;
    margin:0;
    padding: 0;
    border: 0;
}

.pa{
        border: 5px solid #ffffff;
  outline: 1px solid #F3EFE4;

}

.pa:hover{
        border: 5px solid #ffffff;
  outline: 1px solid #F3EFE4;
}
 

#slides div {
   margin: 10px;
background: #FAFAF5;
font-size: 10pt;
text-align: justify;
line-height: 95%;
border-left: 1px solid #F3EFE4;
border-right: 1px solid #F3EFE4;
border-top: 1px solid #F3EFE4;
border-bottom: 1px solid #F3EFE4;
   height: 200px; /* Égal à la hauteur de l'image */
   overflow: hidden;
   position: relative;
   width: 345px; /* Égal à la largeur de l'image */
}

#slides div img {
   left: 0;
   position: absolute;
   top: 0;
   transition: transform 0.5s ease-in-out;
   -moz-transition: -moz-transform 0.5s ease-in-out;
   -o-transition: -o-transform 0.5s ease-in-out;
   -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#slides div:hover img {
   transform: translateY(-200px); /* Valeur négative égale à la hauteur de l'image */
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
  -webkit-transform: translateY(-200px);}
 
a:link,a:active,a:visited {
    font-size: 10px;
    font-weight: italic;
    text-decoration: none;
    color : #B6B28B;
    text-transform: Uppercase;
    font-family: Arial;
 }
u {
   text-decoration: none;
                color: #D2CA64;
                background: transparent;
                font-size: 11px;
                font-family: Georgia;
                letter-spacing: 2px;
                cursor: default;
                text-transform: lowercase;


                }
b {
   text-decoration: none;
                text-transform: uppercase;
                color:#31A5A0;
                background: transparent;
                font-size: 10px;
                font-family: Arial;
                letter-spacing: 2px;
                cursor: default;

                }

J'ai testé en local et ca le fait avec la PA qu'elle t'a donné.

Par contre, pour mettre autant d'information derrière une si petite image, mon code ne convient pas
Par contre je pense l'utiliser sur mon prochain site web ou mon forum tient, ca m'a donné des idées

[sweetheart29]

Haaan c'est génial !!! Merci énormément, c'est exactement ce que je voulais !

[benneke]

Par contre, faudra encore mettre en forme tout le reste

[sweetheart29]

Tout le reste ? Je n'ai plus qu'à remplacer les infos et les images

[benneke]

tant mieux alors ^^