Как увеличить div на hover, не перемещая другой div

Question

Я ищу для достижения эффекта наведения, например, this hover, где изображение увеличивается, но не смещает окружающие div. Я видел, что это было сделано путем назначения относительного и абсолютного позиционирования и индекса z, но это не работает для меня. Возможно, я присвоил эти значения неправильным классам. Мой код ниже ... любая помощь приветствуется

я не был полностью уверен, как разместить код здесь, так что ... мой сайт (и проблема коды) можно рассматривать here

Это мой первый раз размещение здесь. Спасибо за инструкцию. Вот код ...

HTML:

<div class="products-container"> 
    <div class="products-container-inner"> 
     <div class="item"> 
     <div class="item"> 
     <div class="item"> 
     <div class="item"> 

CSS:

div.item { 
    height: 135px; 
    width: 150px; 
    margin: 10px; 
    display: inline-block; 
    float: left; 
} 

div.item:hover { 
    border: none; float: left; 
    height: 280px; 
    width: 280px; 
    background-color: #ffffff; 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    -webkit-transition: .2s ease; 
    -moz-transition: .2s ease; 
    -o-transition: .2s ease; 
    -ms-transition: .2s ease; 
    transition: .2s ease; 
} 

div.products-container-inner { 
    margin: auto; 
    width: 100%; 
    border: none; 
    padding: 10px; 
    overflow: hidden; 
} 

div.item .product-name { 
    text-align: center; 
    display: none; 
} 

div.item:hover .product-name { 
    text-align: center; 
    display: block; 
} 

div.item .price-box { 
    text-align: center; 
    display: none; 
} 

div.item:hover .price-box { 
    text-align: center; 
    display: block; 
} 

div.item .btn {  
    background-color: #EE432E; 
    background-image: -moz-linear-gradient(center top , #EE432E 0%, #C63929 50%, #B51700 50%, #891100 100%); 
    border: 1px solid #951100; 
    border-radius: 5px 5px 5px 5px; 
    box-shadow: 0 0 0 1px rgba(255, 115, 100, 0.4) inset, 0 1px 3px #333333; 
    color: #FFFFFF; 
    font: normal 16px/1 "helvetica neue",helvetica,arial,sans-serif; 
    padding: 3px 0; 
    float: left; 
    margin-left: 65px; 
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); 
    text-decoration: none; 
    width: 150px; 
    display: none; 
} 

div.item:hover .btn { 
    text-align: center; 
    display: block; 
    background-color: #F37873; 
    background-image: -moz-linear-gradient(center top , #F37873 0%, #DB504D 50%, #CB0500 50%, #A20601 100%); 
    cursor: pointer; 
} 

div.item:active .btn { 
    background-color: #D43C28; 
    background-image: -moz-linear-gradient(center top , #D43C28 0%, #AD3224 50%, #9C1500 50%, #700D00 100%); 
    box-shadow: 0 0 0 1px rgba(255, 115, 100, 0.4) inset; 
} 

Answer 1

В вашем примере того, что вы хотите достичь ... Существует два дивы за тот же рис.
Один «обычный» и один «зависающий», который появляется только при наведении.
Этот скрытый как z-индекс 2 и отображается над первым ... Это дает впечатление об изменении размера div. Но дело не в этом.
;)

===
EDIT: нормально Рух, увидеть этот старт я сделал для вас здесь ...
Без JQuery, вы не будете иметь никаких «блестящие эффекты», как FadeIn/Затухание ...
Но, это может быть выбор, чтобы сделать это следующим образом:

CSS:

div.item {width:200px;} 
    div.hover {display:none; position:relative; z-index:2; top:-200px; width:300px;} 

    // The top:-200px is to move the big image up... depends on the small pic height. 
    // And the width are in fonction of the pics width. 

HTML:

<div class="item" id="img1" onmouseover="showbigger(this.id);"> 
    <img src="something.jpg" style='width;200px; height:200px; border:1px solid black;'> 
    </div> 

    <div class="hover" id="img1big" onmouseout="shownormal(this.id);"> 
    <img src="something-bigger.jpg" style='width;300px; height:300px; border:1px solid black;'> 
    </div> 

    <script> 
    function showbigger(ref){ 
    document.getElementById(ref+'big').style.display='inline'; 
    } 

    function shownormal(ref){ 
    document.getElementById(ref).style.display='none'; 
    } 
    </script> 

Вам придется немного поиграть с позиционированием и размерами pic.
И это может быть не идеальное решение ... но это начало, если вы хотите сделать это с помощью JavaScript.

Answer 2

Html для гиперссылки:

<a href="/index.html" onclick="createPopup">Click Here</a> 

Css

a{text-decoration: none; 
    position: fixed; 
    color: #0000ff; 
} 

a:hover { text-decoration: initial; 
    color: #ff0000;  
} 

a:visited {color: #b200ff;}