テーブルの背景色が色付きのぼかしの錯覚を与える

Question

私はテーブルセルの周りに青い枠線を取り除こうとしています。色は表のセルの背景色と同じです。私は画像が細胞全体を占めるようにしたいが、境界のように見えるこれらの線を取り除く方法を理解することはできない。アイデアは、セル上をホバリングすることによって背景をシースルーにすることです。このjsfiddleのテーブル全体にリンクしていますが、ここに以下のコードスニペットがあります。

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; 

Answer 1

この

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; 
} 

サンプル・スニペットのようimgにtdとdisplay: block;にpadding: 0を追加

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

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

 
} 
 
.samples td:hover p{ 
 
\t visibility: visible; 
 
} 
 
.samples td p{ 
 
\t 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>