I would like to make the Hover effect apply to the entire div, not just the writings

Question

Just like it’s on this website:https://www.smitefire.com/smite/gods#

.white {
  color: #ffffff;
}

.god_susano {
  border-bottom: 3px solid #e6b800;
}

#gods_border {
  border: 1px solid gray;
  width: 129px;
  margin-top: 5px;
  padding: 2px;
  font-size: 11px;
  background: gray;
  padding-left: 10px;
}

#padding_h4_gods {
  padding-left: 35px;
}

#gods_border_mom {
  border: 1px solid gray;
  padding: 3px;
  width: 145px;
}

a.link1:hover {
  color: #4d79ff;
}

<a href="susano url/susano.html" class="link1">
  <div id="gods_border_mom">
    <div> <img src="https://www.smitefire.com/images/god/icon/susano.png" class="god_susano" width="143px"> </div>
    <div class="white" id="gods_border">
      <h4 id="padding_h4_gods">Susano</h4> Deus da tempestade </div>
  </div>
</a>

Answer 1

Friend the organization of your html was half meaningless, I do not know if the goal was to copy the site but I will also leave a way that organizes the cards in the same style using the float: left; directly in the tag a.

a{
    text-decoration: none;
}

.god-box {
    background: none repeat scroll 0 0 #000;
    border: 1px solid #242833;
    color: #FFF;
    display: block;
    margin: 5px;
    padding: 3px;
    text-align: center;
    width: 143px;
    float: left;
}

.god-box img{
    width: 143px;
    height: 143px;
    border: none;
    vertical-align: bottom;
}

.info{
    background: none repeat scroll 0 0 #202020;
    margin-top: 3px;
    padding: 4px;
    font-size: 12px;
    height: 60px;
    overflow: hidden;
}

.info .name{
    font-size: 12px;
    padding-bottom: 3px;
}

.info .description{
    color: gray;
    font-size: 10px;
    margin: 0 -4px;
}

.god-box:hover{
    border-color: #4d79ff;
}

<a href="#!" class="god-box">
            <img src="https://www.smitefire.com/images/god/icon/susano.png" alt="susano" >
            <br>
            <div class="info">
                <div class="name">Susano</div>
                <div class="description">Deus da tempestade</div>
            </div>
        </a>
        <a href="#!" class="god-box">
            <img src="https://www.smitefire.com/images/god/icon/susano.png" alt="susano" >
            <br>
            <div class="info">
                <div class="name">Susano</div>
                <div class="description">Deus da tempestade</div>
            </div>
        </a>