Jump to content
laurens

rotateY(180deg)

Recommended Posts

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);
}

Share this post


Link to post
Share on other sites

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 :wub:

Merci

Share this post


Link to post
Share on other sites

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 *}

Share this post


Link to post
Share on other sites

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 :wub:

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 --- *}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More