how to enlarge a div on hover without moving other div - html

Question

I'm looking to achieve a hover effect like this hover where the image enlarges but does not displace the surrounding divs. I have seen this done by assigning relative and absolute positioning and a z-index but that isn't working for me. Perhaps I assigned those values to the wrong classes. My code is below...any help is appreciated
I wasn't totally sure how to post the code here so...my site (and code problem) can be viewed here
It's my first time posting here. Thanks for the instruction. Here is the code...
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

In your example of what you want to achieve... There is two divs for the same pic.
One "regular" and one "hover" that only appears on hover.
This hidden one as a z-index of 2 and is shown over the first... Wich give that impression of a resising div. But it's not the case.
;)
===
EDIT:
ok Ryh, see this start I've done for you here...
Without jQuery, you will not have any "shiny effects" like fadein/fadeout...
But, it may be a choice to do it like this :
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>
You'll have to play a little with positioning and pic sizes.
And this may not a perfect solution... but it's a start if you want to do it with JavaScript.

Answer 2

I was able to achieve this without using two divs by "zooming in" on the element using
element:hover {
transform: scale(1.5);
}
https://www.w3schools.com/howto/howto_css_zoom_hover.asp

Answer 3

Html for a hyperlink:
Click Here
Css
a{text-decoration: none;
position: fixed;
color: #0000ff;
}
a:hover { text-decoration: initial;
color: #ff0000;
}
a:visited {color: #b200ff;}