user5348fh8y5 user5348fh8y5 - 2 months ago 7
CSS Question

use same background lines for image & list items

if you run below code snippet, you can see as below image as in this link

enter image description here

there is separation between image and list items with background line. i want to remove that and want to display like below image

enter image description here

all i want is include image and list items in single rectangle



.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}


.grow {
padding: 5px 5px 5px 5px;
border-radius: 10px;
width: 23%;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
background-color : #fff;

}
.grow:hover ul{
display: block;
}

.grow ul {
margin: 0;
padding: 5px;
list-style: none;
display: none;
position: absolute;
z-index: 1;
background: #fff;
box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
left: 0;
right: 0;
}

.grow img{
width: 100%;
}

.expand
{
position:relative;
right:8px;
top:4px;
}

<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png"
onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li><a class="links1234" href="/cases-covers/apple-iphone-4.html">iPhone 4</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-4s.html">iPhone 4s</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5.html">iPhone 5</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5c.html">iPhone 5C</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-5s.html">iPhone 5S</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-6.html">iPhone 6</a></li>
<li><a class="links1234" href="/cases-covers/apple-iphone-6-plus.html">iPhone 6 Plus</a></li>
</ul>
</div>





Jsfiddle : https://jsfiddle.net/ha9pscx9/1/

Answer

Edited

Check this JSFIddle:

Add this to your css to have shadow over the whole box pop-up:

.grow:hover:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 10px; /* Half of the original height */
  bottom: 5px;
  left:0;
  background-color: white;
  //box-shadow: 0 0px 0px 3px white;
  z-index: 2;
}

Also change the following parameters for .grow ul to:

box-shadow: 0 0px 5px 1px rgba(0,0,0,.25);
margin-top: 0px;

Check the JSFiddle code (the css) if it doesn't work for you as in example.

Note: You may notice that I introduced #limheight to reproduce the situation. However if you want to use this id for more elements you should use it as a class not as an id, because the id it's supposed to be unique on the page.