Bordure d'image sans changement de taille (2e méthode)

by ydelmas

HTML

<div class="grid_3"> 
  <div class="figure">
      <img src="http://lorempixel.com/g/231/150/abstract/" />
  </div>
  <h3>Nouvel Album</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Voir plus</a>
  </p>
</div>
<div class="grid_3 avecBordure">
  <div class="figure">
      <img src="http://lorempixel.com/g/231/150/cats/" />
  </div>
  <h3>Nouvel Album</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">Voir plus</a>
  </p>
</div>

CSS

/* ajout pour la bordure */
.figure img { vertical-align: middle; }
.avecBordure .figure { position: relative; }
.avecBordure .figure::before {
    border: 2px solid #FF00FF;
    display: block; content: ' ';
    position: absolute; width: 100%; height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* CSS issu de la grille */
.grid_3 { width: 231px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
    display:inline; float:left; position:relative;
    margin-left: 6px; margin-right: 6px;
}