Display a transition from white to black border in hover-CodePudding

Goal:
Having the mouse over the picture, a transition will be displayed from white to black border.

Problem:
I can't find the right syntax to solve it.

JSBIN:
https://jsbin.com/hiviguyaru/edit?html,css,output

Thank you!

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 5px;
}

.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border: 1px solid white;
}

.card:hover {
  border: 1px solid black;
}

.cardTitle {
  width: 100%;
  margin-top: -4px;
  color: white;
  background-color: grey;
  font-size: xx-large;
}

.responsive {
  width: 300px;
}


/* 2 column */

@media (min-width: 700px) and (max-width: 899px) {
  div.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 3 columns */

@media (min-width: 900px) {
  div.cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div >
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >ONE</div>
  </div>
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >TWO</div>
  </div>
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >THREE</div>
  </div>
</div>

CodePudding user response：

Inside the .card { use

transition: border 0.3s;

.cards {
  margin: 0 auto;
  display: grid;
  grid-gap: 5px;
}

.card {
  width: 100%;
  min-height: 100px;
  background-color: #e6e6e6;
  text-align: center;
  border: 1px solid white;
  transition: border 0.3s; /* just this line... */
}

.card:hover {
  border: 1px solid black;
}

.cardTitle {
  width: 100%;
  margin-top: -4px;
  color: white;
  background-color: grey;
  font-size: xx-large;
}

.responsive {
  width: 300px;
}


/* 2 column */

@media (min-width: 700px) and (max-width: 899px) {
  div.cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 3 columns */

@media (min-width: 900px) {
  div.cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div >
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >ONE</div>
  </div>
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >TWO</div>
  </div>
  <div >
    <img src="https://i.picsum.photos/id/638/200/300.jpg?hmac=oYRYfxaIBKyb10YHb6-3AGadeAdyEWX91vrVrqdTnGE"  alt="" />
    <div >THREE</div>
  </div>
</div>