Un hover?

Bonjour,

J'aimerais savoir quel type de fonction a utilisé ce site pour faire cet effet sur l'image?je pensais à un hover, ou comme l'effet des portes coulissantes?

Exemple

Bonjour,
Comme ça en checkant rapidement le code je pencherai pour du jquery grace à la fonction .hover() et .aminate() >> http://api.jquery.com/animate/
Il est par ailleurs possible de le faire en CS3 grace à :

ul li a{
    opacity: 0.5;
}

ul li a:hover{
    opacity: 1;
    transition: opacity 1s;
}

Quelque chose dans ce gout là
En espérant t'avoir aidé
Bonne journée

En fait, en temps normal y a pas de soucis de l'inclure dans un site...mais j'aimerais en fait faire cet effet sur la page d'accueil d'un site prestashop...

C'est possible d'inclure une telle fonction directement sur cette interface ou faut-il créer un module spécifique à cette animation?

C'est tout à fait possible en CSS ou en JS.

Pourrais-tu d'avantage m'aiguiller SuperMerguez stp.

Et bien ce que je veux dire, c'est que tu peux modifier autant que tu veux les fichiers de ton template presatashop .

As tu des notions ou des bonnes compétences sous prestashop ?

Hello.

En appliquant un style sur le :hover du div, puis celui de l'image, c'est très simple. Un petit exemple.

@Florian_R c'est du bacon canadien ?

@serpolet je t'ai envoyé un mp avec un tuto

Merci pour vos réponses...il faut maintenant que j'intègre ce code dans un module, pour pouvoir l'afficher en page d'accueil de ma boutique prestashop

Pour tu t'embêtes à vouloir le mettre dans un module ?

tu prends blocktopmenu comme module de menu (menu de base prestashop)

tu édites la feuille de style blocktopmenu.css et l'affaire des dans le c*l de l'âne

Re-bonjour,

En utilisant la structure de Florian, j'ai placé le code HTML dans le fichier TPL HomeFeatured du thème:

<div id="hovera">
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
</div

Et dans le fichier global.css :

#hovera img {
	transition: opacity 0.5s
}

#hovera div:hover img {
	opacity: 0.5
}

#hovera div:hover img:hover {
	opacity: 1
}

Mais rien ne se passe, auriez-vous des indications?

Cordialement.

Tes images n'ont pas d'extension...

@SuperMerguez : Pas besoin d'extension avec BaconMockup

@serpolet Il y a une coquille sur tes sélecteurs. Si tu veux utiliser un id, tu dois avoir #hovera:hover et non pas #hovera div:hover.

@Florian_R ok je ne savais pas

Merci pour vos réponses mais cela ne marche toujours pas sur prestashop :

Les deux possibilités que j'ai testées:

1/

Fichiers du Thème:

global.css :

#hovera img {
	transition: opacity 0.5s
}

#hovera:hover img {
	opacity: 0.5
}

#hovera:hover img:hover {
	opacity: 1
}

HomeFeatured:

<div id="hovera">
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
</div>

2/Fichiers à la racine:

HomeFeatured.tpl:

<div>
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
	<img src="http://baconmockup.com/300/200">
</div>
<style type="text/css">
  {literal}
img {
	transition: opacity 0.5s
}

div:hover img {
	opacity: 0.5
}

div:hover img:hover {
	opacity: 1
}
  {/literal}
</style>

J'ai forcé la compilation et désactiver le cache mais rien n'y fait!

Ne connaissant pas Prestashop, je ne peux pas dire. Sans une page en ligne, difficile de t'aider.

Si je dis pas de bêtise ton template est surchargé dans le dossier du thème, donc tu travailles dans le mauvais fichier.

Ouvre le template dans /www/dossier/themes/tontheme/module/homefeatured.tpl

Normalement, si tu apportes des modifications dans ce fichier cela marchera

Un simple mot "test" dans le fichier pour savoir si tu travailles dans le bon est parfois utile surtout que prestashop est parfois compliqué à prendre en main lorsqu'on est pas très habitué.
Modifié par SuperMerguez (07 Aug 2012 - 14:48)

Ben j'ai essayé les deux solutions, j'ai bien apporté les modifications dans /www/dossier/themes/tontheme/module/homefeatured.tpl , c'est pour ça que je comprends pas...Merci pour ton aide en tout cas SuperMerguez

As tu pensé à désactiver le cache ? Et à forcer la compilation ?

Par défaut prestashop a un système de cache sur tous les fichiers du template, tu peux aisément le désactiver le temps d'effectuer tes modifications.

Au fait :

Est ce que ton module est bien greffé à ton hookHome ?