Affichage d'un titre au survol d'images 

Tout en html + CSS

Il est possible bien entendu de créer la galerie en code html (et ce sera souvent plus simple). J'ai suivi ce tuto de Alessio Atzeni sur codrops.com pour créer l'effet ci-dessous. Vous trouverez 9 autres propositions du même webdesigner plus loin.

Archer moldave

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops.

Read More

 

Explications (Alessio Atzeni)

Poster une image sur une page cachée et récupérer son adresse. Créer un widget html contenant deux div imbriquées et du texte :

 

 <div class="view view-fifth"> /* (.view et .view-fifth : deux classes qui correspondent au style n° 5 d' Alessio) */<img src="https://… (l'adresse de l'image "cachée")" alt="" /><div class="mask"> /*(du texte stylé par les balises h2 et <p> */<h2>(Titre de l'image)</h2><p> Indication de vos sources</p><a href="http://…(l'adresse du lien)" class="info">Lisez plus</a></div</div>

 

Répéter l'opération autant de fois que d'images désirées.

 

 

 

Générer le CSS proposé par Alessio grâce à "modifier le Head" (voir ci-dessous). Ces CSS indiquent notamment que la Div de texte se trouve décalée par rapport à l'image, et "cachée" par la propriété overflow :hidden de la div principale. Lorsque la souris passe sur la div principale, leurs valeurs de position changent, ainsi que d'autres détails de design.

 

Les positions relatives, les dimensions identiques des deux div et enfin, les valeurs de transition, transform et delay, créent l'illusion que les deux div se repoussent en échangeant leur places. La clarté de ce code est rendu possible par une ingénieuse combinaison de classes.


/* les aspects de base des éléments, par class et par balises */

.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-fifth .mask { 

        background-color: rgba(146,96,91,0.3);

/* Par défaut le contenant du texte est décalé vers la gauche*/

        transform: translateX(-300px);

        opacity: 1;

        transition: all 0.4s ease-in-out; 

}

.view-fifth h2{

    background: rgba(255, 255, 255, 0.5);

    color: #000;

    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);

}

.view-fifth p{

    opacity: 0;

    color: #333;

    transition: all 0.2s linear;

}

 /* ci-après, le style au survol (:hover) des éléments */

.view a.info:hover {

    box-shadow: 0 0 5px #000

}

/* transition, transform et delay sont les propriétés qui "rendent" les animations. Elles ont de nombreuses variantes. Ici, on décrit le mouvement, sa courbe de vitesse*/

.view-fifth img {

        transition: all 0.3s ease-in-out; 

}

/* Au survol, le contenant du texte se trouve aligné sur l'image*/

.view-fifth:hover .mask { 

        transform: translateX(0px);

}                                               

/* Au survol, l'image est repoussée vers la droite*/

.view-fifth:hover img { 

        transform: translateX(300px);

        transition-delay: 0.1s;

}

.view-fifth:hover p{

    opacity: 1;

    transition-delay: 0.4s;

}

/* et c'est tout !

Il suffit d'adapter pour les divers effets proposés ou inventer ses propres variantes.

Chaque ligne du code est utile, et il faudrait décrire pourquoi, mais c'est simple à explorer par soit même, par exemple avec un répertoire de propriétés.*/

 

Ci- après, 9 autres design de Alessio Atzeni, sur le même principe :


Archer moldave

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops.

Read More

Le Futur d'Hier

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Sonneurs de border pipes

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Jeune Gyrovielliste

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Archer moldave2

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur tympanus.net

Read More

Sonneurs de border pipes

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Jeune Gyrovielliste

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Enluminure au canard

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur codrops

Read More

Archer moldave2

Effet rollover en widget html + CSS3 proposé par Alessio Atzeni sur tympanus.net

Read More

Affichage au survol avec Snipzoo.

2017 : incompatible avec le protocole https - adaptation nécessaire

Snizoo.com proposait plusieurs "widgets" qui sont devenus obsolètes lorsque Jimdo a changé - début 2015 - certains aspects de son code. Ce module permettait de faire apparaitre le titre de l'image sur une galerie au survol, et de changer un peu son aspect, avec un comportement très intéressant. L'effet touchait toutes les galeries.

(Snipzoo ne propose plus ces widgets)

En modifiant le code et grâce à des protocoles précis, il est encore possible d'utiliser certains des widgets sur les nouveaux designs Jimdo  comme l'illustre la galerie c-dessous, même en htpps:  (me consulter).

Bien entendu, il faut que vous ayez déjà acheté le plug-in Snipzoo.


Une superbe application sur le site de Ulysse Lacoste Sculpteur 



Changement d'une image en Javascript.

Le but est de fabriquer des images 'bouton" qui renvoient vers un lien quelconque. Dans cet exemple, on utilise le javascript. (Source : J2L).

- Notez le lien vers lequel vous voulez renvoyer : (ici : Galerie)

- Placez sur une page cachée les images nécessaires à votre "bouton".

Pour notre exemple, ce sera cette image et celle-ci.

 Elles doivent avoir les mêmes dimensions.

- Créez un module html et collez dedans :

<a href="(ici le lien vers lequel vous voulez renvoyer)" target="_top">

<img src="(adresse de l'image par défaut)"

alt="(texte alternatif au survol de l'image)"

title="(titre de l'image, pour le référencement)"

onmouseout="javascript:this.src='(adresse de l'image à afficher par défaut)';

" onmouseover="javascript:this.src='(adresse de l'image à afficher au survol)';"/>

</a>
Faites bien attention à distinguer les " des ' dans le code.

En développant, vous pourrez ajouter un titre, une animation etc…

galerie


Changement d' image au survol en CSS

Tout en CSS ! Cette manipulation est le principe simplifié que Alessio Atzeni à utilisé avec maestria en tête d'article.

- Notez le lien de la page vers laquelle vous voulez renvoyer (ici : galerie)

- Hébergez les images nécessaires à votre "bouton" et copiez leurs url

(ici : Cette image et cette image)

- Insérez un bouton jimdo et récupérez son identifiant unique (voir les tutos)

(ici > #cc-m-10051436598)
- Allez dans "modifier le Head" et inscrivez :

<style type="text/css">

 /*<![CDATA[*/

#(identifiant unique du bouton)

{width:200px; height:200px; /*= les dimensions du bouton)*/

background:url(l'adresse de l'image d'arrière-plan par défaut); 

/*pour que l'image recouvre l'espace disponible*/

background-size:cover;} 

/*puis, l'état au survol :hover*/

#(identifiant unique du bouton):hover 

{background:url(l'adresse de l'image d'arrière-plan au survol);

background-size:cover;}

//*]]>*/

Dans le cas de cet article, cela donne : 

#cc-m-10051436598{width:200px; height:200px;background:url(http://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:mode=fitin:format=jpg/path/s382ff9b5aaa365ec/image/ibcae41c5a81f8bed/version/1431340992/image.jpg); background-size:cover;} 
#cc-m-10051436598:hover
{background:url(http://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:mode=fitin:format=jpg/path/s382ff9b5aaa365ec/image/i4eb2184b83e3ad22/version/1431340995/image.jpg); background-size:cover;}

 

Il reste à adapter le style du bouton par défaut.
Dans le cas de mon site, c'est un fond gris et des dimensions trop petites.

Mais l'identifiant à cibler est un peu particulier car il n'est caractérisé que par une class, générale à tout le site : .j-calltoaction-link. Si je la modifie, tous les boutons du site seront affectés.

Aussi, je cible, seulement sur la page courante,  les contenants touchés par cette class :

#page-2007624198 .j-calltoaction-link 

{width:168px;height:180px;

background-color: rgba(255, 255, 255, 0)!important; border:none!important;}

Cette manipulation vous semble plus complexe que le javascript ?
C'est effectivement plus long à écrire, mais…

Le CSS utilise des fonctions simples, explicites, et s'avère plus souple pour un débutant.

En effet, dès lors que vous avez compris le protocole, vous pouvez faire varier à l'infini l'aspect de votre bouton. 

Il est possible de créer un effet personnalisé en variant l'opacité, la position, les dimensions, etc. Le protocole reste le même :

#(identifiant unique du bouton):hover

{(propriété à changer au survol): (valeur de la propriété);}  

 

Une infinité de variantes est possible.