РазделыРазработка Интернет-магазина под Вас
О сайте | Теги | RSS
Контакты
email:
skype:
© 2008 – 2021
Вернуться
» » » CSS - Появляется весь блок при наведении

CSS - Появляется весь блок при наведении

CSS - Появляется весь блок при наведении

<!doctype html>
<html>
<head>
<title>Холодильники</title>
<meta charset="utf-8">
</head>
<body>

<style>

.gtile-i-wrap{position:relative;float:left;width:18em;height:15em;margin-bottom:1em}
.gtile-i{overflow:hidden;position:relative;z-index:5;width:18em;height:15em}
.gtile-i:before{content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:40px;
  background:#fff;
      background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(80%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,1)));
 background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
      background:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
   background:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
  background:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
}
.gtile-i-box{overflow:hidden;padding:0 10px 0 15px}
.gtile-i:hover .gtile-i-box{border:2px solid #b4c6ec;border-radius:7px;margin:-2px -5px 0 -7px;padding:0 15px 1.5em 20px;background-clip:padding-box;
   background:#fff;
      background:-moz-linear-gradient(top, #fff 0%, #fff 60%, #f2f2f2 95%, #fff 100%);
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(60%,#fff), color-stop(95%,#f2f2f2), color-stop(100%,#fff));
        background:-webkit-linear-gradient(top, #fff 0%,#fff 60%,#f2f2f2 95%,#fff 100%);
      background:-o-linear-gradient(top, #fff 0%,#fff 60%,#f2f2f2 95%,#fff 100%);
   background:-ms-linear-gradient(top, #fff 0%,#fff 60%,#f2f2f2 95%,#fff 100%);
  background:linear-gradient(to bottom, #fff 0%,#fff 60%,#f2f2f2 95%,fff 100%);
 -webkit-box-shadow:5px 5px 13px 0 rgba(54,69,102,.5);
                 box-shadow:5px 5px 13px 0 rgba(54,69,102,.5);
}

.gtile-i:hover{overflow:visible;position:relative;z-index:10 !important}
.gtile-i:hover .gtile-short-detail{z-index:11 !important;max-height:none}
.gtile-i:hover:before{display:none}

</style> 

<br/>

      <div class="gtile-i-wrap">
        <div class="gtile-i">
          <div class="gtile-i-box">

                    Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth / Wi-Fi 802.11a/b/g/n / NFC / MHL / 8 ГБ встроенной памяти + поддержка microSD / разъем 3.5 мм / 3G / aGPS, Glonass / ОС Android 4.0 / 129 x 65 x 10.7 мм, 120 г / белый Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth

          </div>
        </div>
      </div>
          
      <div class="gtile-i-wrap">
        <div class="gtile-i">
          <div class="gtile-i-box">

                      Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth / Wi-Fi 802.11a/b/g/n / NFC / MHL / 8 ГБ встроенной памяти + поддержка microSD / разъем 3.5 мм / 3G / aGPS, Glonass / ОС Android 4.0 / 129 x 65 x 10.7 мм, 120 г / белый Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth

          </div>
        </div>
      </div>
          
      <div class="gtile-i-wrap">
        <div class="gtile-i">
          <div class="gtile-i-box">

                      Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth / Wi-Fi 802.11a/b/g/n / NFC / MHL / 8 ГБ встроенной памяти + поддержка microSD / разъем 3.5 мм / 3G / aGPS, Glonass / ОС Android 4.0 / 129 x 65 x 10.7 мм, 120 г / белый Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth

          </div>
        </div>
      </div>
          
      <div class="gtile-i-wrap">
        <div class="gtile-i">
          <div class="gtile-i-box">

                      Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth / Wi-Fi 802.11a/b/g/n / NFC / MHL / 8 ГБ встроенной памяти + поддержка microSD / разъем 3.5 мм / 3G / aGPS, Glonass / ОС Android 4.0 / 129 x 65 x 10.7 мм, 120 г / белый Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth

          </div>
        </div>
      </div>        

      <div class="gtile-i-wrap">
        <div class="gtile-i">
          <div class="gtile-i-box">

                        Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth / Wi-Fi 802.11a/b/g/n / NFC / MHL / 8 ГБ встроенной памяти + поддержка microSD / разъем 3.5 мм / 3G / aGPS, Glonass / ОС Android 4.0 / 129 x 65 x 10.7 мм, 120 г / белый Экран 4.3" (1280х720 сенсорный мультитач) / моноблок / 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth 2-х ядерный процессор 1.5 ГГц / камера: основная 13 Мп, фронтальная VGA / Bluetooth

          </div>
        </div>
      </div>        
          
</body></html>

Рекомендую к просмотру
15.06.2017 / Категории: Блог / CSSКомментировать (0)
Оставить комментарий
Вверх