CSS3はウェブサイトの製品表示効果図を実現します

<div class="製品">
  <ul>
   <li>
    <div class="pro-img">
     <a href="#">
      <img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
     </a>
    </div>
    <h3><a href="#">Xiaomi TV 4A 43 インチ ユース エディション</a></h3>
    <p class="desc">フルHDスクリーン/人工知能音声</p>
    <p class="価格">
     <span>1499</span> 元<del>1699</del>
    </p>
    <div class="レビュー">
     <a href="#">
      <span class="msg">相変わらず素晴らしい、Xiaomi の感想</span>
      <span class="auther">驚きのコメント</span>
     </a>
    </div>
   </li>
  </ul>
 </div>

* {
	マージン: 0;
	パディング: 0;
}

ul、ol {
	リストスタイル: なし;
}

入力、ボタン{
	アウトライン: なし;
	境界線: なし;
}

{
	テキスト装飾: なし;
}

.clearfix::before、
.clearfix::after {
	コンテンツ： "";
	高さ: 0;
	行の高さ: 0;
	表示: ブロック;
	可視性: 非表示;
}

.clearfix::after {
	クリア: 両方;
}

体 {
	パディング: 100px;
	背景色: #f5f5f5;
}

.product li {
    フロート: 左;
    幅: 234px;
	高さ: 246px;
    パディング: 34px 0 20px;
    zインデックス: 1;
    左マージン: 14px;
    下部マージン: 14px;
    背景: #fff;
    -webkit-transition: すべて .2s リニア;
    遷移: すべて .2 秒線形。
	位置: 相対的;
}

.pro-img {
	幅: 150ピクセル;
	高さ: 150px;
	マージン: 0 自動 18px;
}

.pro-img {
	幅: 100%;
	高さ: 100%;
}

.pro-img 画像 {
	表示: ブロック;
	幅: 100%;
	高さ: 100%;
}

.product li h3 {
	マージン: 0 10px;
    フォントサイズ: 14px;
    フォントの太さ: 400;
    テキスト配置: 中央;
}

.product li h3 a {
	色: #333;
}

.desc {
	マージン: 0 10px 10px;
    高さ: 18px;
    フォントサイズ: 12px;
    テキスト配置: 中央;
    テキストオーバーフロー: 省略記号;
    空白: ラップなし;
    オーバーフロー: 非表示;
    色: #b0b0b0;
}

。価格 {
	フォントサイズ: 14px;
	マージン: 0 10px 10px;
    テキスト配置: 中央;
    色: #ff6700;
}

.price del {
	色: #b0b0b0;
}

。レビュー {
	位置: 絶対;
    下部: 0;
    左: 0;
    zインデックス: 3;
    幅: 234px;
    高さ: 0;
    オーバーフロー: 非表示;
    フォントサイズ: 12px;
    背景: #ff6700;
    不透明度: 0;
    -webkit-transition: すべて .2s リニア;
    遷移: すべて .2 秒線形。
}

.review {
	色: #757575;
	表示: ブロック;
    パディング: 8px 30px;
    アウトライン: 0;
}

.review スパン {
	表示: ブロック;
	下部マージン: 5px;
    色: #fff;
}

.product li:hover {
	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    ボックスの影: 0 15px 30px rgba(0,0,0,0.1);
    -webkit-transform: translate3d(0, -2px, 0);
    変換: translate3d(0, -2px, 0);
}

.product li:hover .review {
	不透明度: 1;
	高さ: 76px;
}