rotateY(180deg)

[laurens]

Bonjour,
j'ai mis un rollover sur mes produits en suivant plusieurs post trouver sur le forum, au passage de la souris la 2éme image apparaît bien pas de problème, mais je trouve que le changement est brutal donc pas joli. J'aurai voulu avoir un effet de rotation comme ici (voir)

ça fait un petit moment que je cherche mais j'ai pas l'effet escompter, j'ai mis en rouge le code que j'ai rajouter

Merci de votre aide
ps 1.4.7.3

ul#product_list a.product_img_link img {
vertical-align: bottom;
margin-top: 5px;
border: 1px solid #CCCCCC;
transform-style: preserve-3d;
transition: all 0.6s ease 0s;
}

ul#product_list a.product_img_link img:hover {
border: 1px solid #CCCCCC;

-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

[laurens]

Bonjour,

bon j'ai compris (mais pas résolu) mon problème, c'est que je fait faire la rotation sur ma première image et la 2ème image n'a pas l'effet inverse

Donc question: peut on le faire en css

Merci

[laurens]

Bonsoir,

toute mes tentatives etant veine, j'essai autre chose , j'aimerais que la transition des 2 images soit plus lente, voici ce que j'essai de faire mais ça n'a aucun effet (en rouge code rajouter)

 

 {* jquery function to roll images *}
    {literal}
         <script type="text/javascript">
          $(document).ready(function(){
             $(".1").hide();
             $("img.0").mouseover(function(){
             if ( $(this).next("img").length > 0 ) {
                $(this).next("img").show();
                $(this).hide();

                $(this).fadeIn(slow);
            }
        });
         $(".1").mouseout(function(){
          $(this).hide();
          $(this).prev("img").show();

          $(this).fadeOut(slow);
        });
    });
        </script>
    {/literal}
    {* /jquery function to roll images *}

[Hippyz]

Bonsoir,

 

Pour cet effet, ce template n'utilise que du css. http://jsfiddle.net/8B9Zy

 

Inspirez vous de la source

[laurens]

Bonsoir Hippyz et merci de votre répnse, j'avais déjà essayer mais je n'y suis pas arriver car les 2 images sur mon tpl ne sont pas defini pareil et c'est la que je boque

voici le code  dans poduct-list.tpl

 

{* --- hack to show additional images --- *}                
                 <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                 {if $page_name == 'category'}
                    {foreach from=$productimg key=key1 item=pimage}
                         {foreach from=$pimage key=key2 item=pimage2}
                                 {if $product.id_product==$pimage2.id_product}
                    <img id="img_{$product.id_product}"src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$pimage2.id_image,'homcat')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}"class="{$key2}";/>
         {/if}
    {/foreach}
   {/foreach}
                     {else}
                    <img id="img_{$product.id_product}"src="{$link->getImageLink($product.link_rewrite,$product.id_image,'homcat')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}"{if isset($homcatSize)} width="{$homcatSize.width}" height="{$homcatSize.height}"{/if} />
                    {/if}
                  </a>              
                  {* --- /hack to show additional images --- *}