0

stwiter ブートストラップを使用して複数の製品を含む製品ページを設計しているため、ブートストラップ フレームワークで流体レイアウトを使用してボックス製品を設計しています。ボックス、下の画像を参照してください。

ここに私のcssとhtmlがあります

    <div class="box-product row-fluid">
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="MacBook" src=""></a></div>
            <div class="name"><a href="">MacBook</a></div>
            <div class="price">
                $589.50                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
  </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="iPhone" src=""></a></div>
            <div class="name"><a href="">iPhone</a></div>
            <div class="price">
                $120.68                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
            </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Samsung Galaxy Tab 10.1" src=""></a></div>
            <div class="name"><a href="">Samsung Galaxy Tab 10.1</a></div>
            <div class="price">
                $236.99                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
           </div>
            <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
            </div>

    </div>
           <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
             </div>

    </div>
              <div class="span2" style="opacity: 1;">
            <div class="image"><a href=""><img alt="Sony VAIO" src=""></a></div>
            <div class="name"><a href="">Sony VAIO</a></div>
            <div class="price">
                $1,177.00                  </div>
                    <div class="cart"><input type="button" class="button" onclick="" value="Add to Cart"></div>
  </div>

    </div>

以下の私のCSS

   .box-product {
width: 100%;
position: relative;
    }
   .box-product > div {
vertical-align: top;
margin-bottom: 20px;
position: relative;
box-sizing: border-box;
    }
    .box-product > div:hover{
 z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius:5px;
box-sizing:border-box;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-o-box-shadow:0 0 30px rgba(0, 0, 0, 0.2);
border: 5px solid #FFA500;
    }
     .box-product .image {
display: block;
margin-bottom: 0px;
    }

製品ボックスにカーソルを合わせると、このボックスは全体と幅の前面に配置されるので、より大きな 画像が私の意味のように配置されます

4

1 に答える 1

0

scale() Methodを使用できます。

例

  style:hover {
      ...
      transform: scale(2);
     -moz-transform:scale(2); 
     -webkit-transform:scale(2);
     -o-transform:scale(2);
     -ms-transform: scale(2);
      ...
  }

  • Scale(2) - div にマウスを合わせると、div のサイズが元のサイズの最大 2 倍になります。

  • これらの値は、自分の選択に従って変更できます。

于 2013-06-11T06:52:56.713 に答える