CODEWITHSUNDEEP
htmlcss
user6619012
user6619012

Reputation:

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/

Upvotes: 2

Views: 65

Answers (3)

snecserc
snecserc

Reputation: 615

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.

Upvotes: 1

stormec56
stormec56

Reputation: 162

This will do:

.links1234 {
       text-decoration: none;
   }

.grow li {
      padding: 10px;
      text-align: left;
  }

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

remove box shadow on .grow ul

.grow ul {
    background: #fff none repeat scroll 0 0;
    /*box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25);*/ /*Remove This*/
    display: block;
    left: 0;
    list-style: outside none none;
    margin: 0;
    padding: 5px;
    position: absolute;
    right: 0;
    z-index: 1;
}

Upvotes: 0

Related Questions