amphitamine
New Member
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 appreciatedI wasn't totally sure how to post the code here so...my site (and code problem) can be viewed hereIt's my first time posting here. Thanks for the instruction. Here is the code...HTML:\[code\]<div class="products-container"> <div class="products-container-inner"> <div class="item"> <div class="item"> <div class="item"> <div class="item">\[/code\]CSS:\[code\]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;}\[/code\]