CODEWITHSUNDEEP
htmlcss
I Like
I Like

Reputation: 1847

Table background color gives illusion of colored border

I'm trying to get rid of a blue border around my table cells. The color is the same as the background color of the table cells; I want the images to take up the entire cell, but can't figure out a way to get rid of these lines that look like borders. The idea is to make the background see-through by hovering over a cell. I link to the entire table in this jsfiddle, but here is a snippet of code below.

CSS

.samples td{
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
    border: 1px solid black;
    box-shadow: 0 0 0 2px #fff;

Upvotes: 0

Views: 79

Answers (1)

Asons
Asons

Reputation: 87221

Add padding: 0 to td and display: block; to img like this

Updated fiddle

.samples td {
    text-align: center;
    width: 30%;
    height:300px;
    position:relative;
    table-layout: fixed;
    background-color: rgb(0,300,300);
    box-shadow: 0 0 0 2px #fff;
    padding: 0;
}
.samples td img{
    display: block;
    width: 100%;
    height:400px;
    z-index: 50;
}

Sample snippet

.samples {
	width: 100%;
	background-color: white;
	z-index:50;
}
.samples table{
	position: relative;
	width: 100%;
}
.samples td {
	text-align: center;
	width: 30%;
	height:300px;
	position:relative;
	table-layout: fixed;
	background-color: rgb(0,300,300);
	box-shadow: 0 0 0 2px #fff;
  padding: 0;
}
.samples td img{
  display: block;
	width: 100%;
	height:400px;
	z-index: 50;
}
.samples td:hover img{
	opacity: .5;

}
.samples p{
	margin: 0;
	position:absolute;
	left: 0;
	top: 50%;
	right:0;
	color: #fff;
	font-size: 20px;
	text-align: center;
	z-index:10;

}
.samples td:hover p{
	visibility: visible;
}
.samples td p{
	visibility: hidden;
}
<div class="samples">
  <table>
    <th>Pokemon</th>
    <tr>
      <td>
        <p>Go Mustangs! Unfortunately, there's not much to cheer for...</p>
        <img src = "http://walnuthighschoolfootball.com/wp-content/uploads/2013-Clare_IMG_0257.jpg">
      </td>
      <td>
        <p>Hiking on Walnut's hilly Schabarum trail is a change from the Evanston pancake metropolis!</p>
        <img src = "http://nobodyhikesinla.files.wordpress.com/2011/04/hiking-2011-4-236.jpg">
      </td>

      <td>
        <p>Orange you hungry for a tangerine? Give me three and I'll give you a show</p>
        <img src = "http://juicyjuicevapor.com/wp-content/uploads/2015/07/tangerines.jpg">
      </td>
    </tr>
    <tr>
      <td>
        <p>My favorite place to nap</p>
        <img src = "https://upload.wikimedia.org/wikipedia/commons/4/4e/Deering_Library_detail_Northwestern.jpg">
      </td>
      <td>
        <p>As a NU Quidditch beater/chaser, I enjoy dodging balls and scoring through hoops.</p>
        <img src = "https://pbs.twimg.com/profile_images/513804815088885761/08UB6aL2.jpeg">
      </td>
      <td>
        <p>Have never played a game as great as Last of Us. The graphics are so realistic, and online multiplayer mode is v fun.</p>
        <img src = "http://media.aintitcool.com/media/uploads/2013/nordling/thelastofus.jpg">
      </td>
    </tr>

  </table>
</div>

Upvotes: 1

Related Questions