table hover하면 table 크기가 변해요

[themapa]

table img를 넣고 td에 마우스를 올리면 안보이던 div를 보이게 하는 기능을 구현하려고 하고 있습니다.
맨 첫번째 td에 구현은 했으나 마우스를 올리니깐 table크기가 바뀌는데 어떻게 바꿔야할지 모르겠습니다.

--- html
table id="news_banner_area">
            <tr>
              <td class="click">
                <i/mg class="img_size" src="./images/news_banner1.png">
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>
                <div class="news_banner_hover_bg">
                  <p>구독</p>
                  <p>기사보기</p>
                </div>
              </td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
            </tr>
          </table>

---- css
.click{
  cursor: pointer;
}

.img_size{
  width: 100%;
  height: 100%;
}

#news_banner_area{
  margin-top: 10px;
  width: 100%;
  height: 320px;
}

#news_banner_area tr td{
  border: solid 1px #dae1e6;
  width: 120px;
  height: 80px;
}

#news_banner_area tr td:hover img{
  display: none;
}

#news_banner_area tr td:hover .news_banner_hover_bg{
  display: block;
}

.news_banner_hover_bg{
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  display: flex;
  font-size: 12px;
  position: relative;
  display: none;
}

.news_banner_hover_bg p:first-child{
  padding: 5px;
  height: 20px;
  background-color: #fff;
  border: solid 1px #dae1e6;
  line-height: 16px;
  position: absolute;
  left: 12px;
  top: 25px;
}

.news_banner_hover_bg p:last-child{
  padding: 5px;
  height: 20px;
  background-color: #fff;
  border-top: solid 1px #dae1e6;
  border-right: solid 1px #dae1e6;
  border-bottom: solid 1px #dae1e6;
  line-height: 16px;
  position: absolute;
  left: 48px;
  top: 25px;
}

[codingapple]

마우스올리면 이미지를 숨기지 말고 이미지 위에 덮어씌워 보여주는 식으로 합시다

[themapa]

테이블 td에 이미지를 넣으라는 말씀이신거죠??

[codingapple]

td에 이미지는 이미 잘 들어있는듯요

[글쓴이]

글