Рамка при наведении на товар

Тема в разделе "OpenCart", создана пользователем KuEdA, 10 апр 2015.

  1. KuEdA

    KuEdA

    Регистрация:
    20 сен 2014
    Сообщения:
    177
    Симпатии:
    34
    Здравствуйте. Помогите, пожалуйста, если можно. Я пытаюсь сделать, чтобы при наведении на товар в новинках, рекомендуемых, категориях и т.д. вокруг него появлялась рамка с тенью. Прописываю таким образом
    Код:
    <?php if($latest_products){ ?>
    <div id="tab-latest-<?php echo $module; ?>" class="tab-content">
          <?php foreach ($latest_products as $product) { ?>
           <div class="product-grid">
            <div class="product-desc-hover">
            <div class="box-absolute">   
          <div>
            <?php if ($product['thumb']) { ?>
                    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
            <?php } ?>
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span><br /><span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
            <div class="rating">
              <?php for ($i = 1; $i <= 5; $i++) { ?>
              <?php if ($product['rating'] < $i) { ?>
              <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
              <?php } else { ?>
              <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
              <?php } ?>
              <?php } ?>
            </div>
                <div class="cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button-prod" title="<?php echo $button_cart; ?>"><i class="fa fa-shopping-cart"></i>&nbsp;<?php echo $button_cart; ?></a></div>
          </div>
                </div>
                </div>
          </div>
          <?php } ?>
        </div>
    В styleshit.css вставляю
    Код:
    .product-grid{width:100%;overflow:visible}
    .product-grid>div{width:33%;min-height:410px;display:inline-block;vertical-align:top;margin-bottom:20px;font-size:12px;/* border-top:1px dashed #ccc */}
    .product-grid .product-desc-hover:hover .descprod_bg{display:none}
    .product-grid .product-desc-hover .descprod_bg{background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 44%, rgba(255,255,255,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.8)), color-stop(44%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: -o-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: -ms-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 );bottom:0;height:40px;left:0;position:absolute;width:100%;z-index:2}
    .box-absolute{background:#fff;border:1px solid #fff;padding:10px 15px;position:absolute;width:93%}
    .box-absolute a img{width:100%;max-width:250px}
    .product-desc-hover{overflow:hidden;position:relative}
    .product-desc-hover:hover{overflow:visible;z-index:100}
    .product-desc-hover:hover .box-absolute{border:1px solid #b4c6ec;box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);-moz-box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);-webkit-box-shadow:5px 5px 13px 0 rgba(54,69,102,0.5);border-radius:5px}
    Рамка и тень появляются, но товары выстраиваются вертикально в ряд, по одному, а нужно, чтобы были сеткой по 3 в ряду. Подскажите, как их можно сгруппировать.
     
  2. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Зачем такой велосипед писали? Нельзя было сделать просто:
    Код:
    .product-grid > div:hover {box-shadow:0px 0px 3px 0px #999;}
    display:inline-block или float:left;
     
    KuEdA нравится это.
  3. KuEdA

    KuEdA

    Регистрация:
    20 сен 2014
    Сообщения:
    177
    Симпатии:
    34
    halfhope, спасибо Вам за ответ. Меня этот велосипед привлек красивым внешним видом. Поэтому хотелось бы именно с ним разобраться до конца. Попробовал Ваш вариант, прописал в styleshit.css:

    .product-grid > div:hover {box-shadow:2px 2px 3px 2px #000;
    display:inline-block;
    }

    Как-то слишком плотно рамка облегает товар, а когда сделал отступ

    padding:7px;

    она начала прыгать при наведении.
     
  4. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Прозрачную рамку добавьте не при наведении, чтобы не прыыгало.
     
    KuEdA нравится это.
  5. KuEdA

    KuEdA

    Регистрация:
    20 сен 2014
    Сообщения:
    177
    Симпатии:
    34
    Сделал таким образом:

    .product-grid > div {
    width:230px;
    display:inline-block;
    margin:10px15px20px23px;
    vertical-align: top;
    border:1px solid rgba(180,198,236,0.23);}.product-grid > div:hover {
    border:1px solid #b4c6ec;
    box-shadow:5px5px13px0 rgba(54,69,102,0.5);-moz-box-shadow:5px5px13px0 rgba(54,69,102,0.5);-webkit-box-shadow:5px5px13px0 rgba(54,69,102,0.5);-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;}

    Теперь ничего не прыгает, не дергается и товары выстраиваются, как нужно. Спасибо за помощь.