[jcpapa]

Pendant que Jean Le Chauve intervient, je trouve de mon côté ceci dans des exemples de blocs qui fonctionnent avec Foundation : http://patterntap.com/code/product-card
C'est exactement ce que je cherche (mis à part la destination qui là est une boutique...).
Je viens d'essayer de l'intégrer mais évidemment, je me plante. J'ai commencé par créer un nouveau "contenu globale" pour l'insérer dans une page... mais c'est une très mauvaise piste.
J'ai d'un côté un code HTML :

Code :

[== XHTML ==]
<div class="row">
    <div class="large-4 columns">
      <div class="item-wrapper">
        <div class="img-wrapper">
          <a class="button expand add-to-cart">Add to Cart</a>
          <a href="#"><img src="http://i.imgur.com/Mcw06Yt.png"></a>
        </div>  
        <a href="#"><h3>Kickin with Kraken Tee</h3></a>
        <h5>$19.99</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere sem enim, accumsan convallis

risus semper.</p>
      </div>  
    </div>
  </div>

D'un autre côté le CSS :

Code :

[== CSS ==]
.item-wrapper {
  padding: 20px;
  border: 2px solid #efefef;
  border-radius: 7px;
  margin-top: 40px;
}
.item-wrapper:hover .img-wrapper img {
  -webkit-filter: grayscale(0);
}
.item-wrapper:hover .img-wrapper .add-to-cart {
  bottom: 0;
}

.img-wrapper {
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.img-wrapper .add-to-cart {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #333;
  padding: 16px 8px;
  bottom: -50px;
  position: absolute;
  z-index: 2;
  color: #fff;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}
.img-wrapper .add-to-cart:hover {
  background-color: #008cba;
}
.img-wrapper img {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-filter: grayscale(1);
  width: 100%;
}

h3 {
  font-size: 22px;
}

h5 {
  font-weight: bold;
}

p {
  color: #888;
  font-size: 13px;
  margin-bottom: 0;
}

Et même un Scss :

Code :

[== CSS ==]
$primary-color: #008cba;

.item-wrapper {
  padding: 20px;
  border: 2px solid #efefef;
  border-radius: 7px;
  margin-top: 40px;
  
  &:hover {
    .img-wrapper {
      img { -webkit-filter: grayscale(0); }
      
      .add-to-cart { bottom: 0; }
    }
  }
}

.img-wrapper {
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;

  .add-to-cart {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: #333;
    padding: 16px 8px;
    bottom: -50px;
    position: absolute;
    z-index: 2;
    color: #fff;
    margin: 0 auto;
    border: none;
    box-shadow: none;

    &:hover { background-color: $primary-color; }
  }

  img {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-filter: grayscale(1);
    width: 100%;
  }
}  

h3 { font-size: 22px; }
h5 { font-weight: bold; }

p {
  color: #888;
  font-size: 13px;
  margin-bottom: 0;
}

Bon... j'ai crée une feuille de style en plus : "product_card_style.css"

Mais je patauge largement lorsque je cherche à intégrer le HTML dans une de mes pages ou dans un gabarit...
J'imagine que pour vous c'est "risible"...

Autre chose, d'habitude je reçois les notifications de réponse au forum, par mail... mais sur ce post, je ne reçois rien !?!
Merci