<div class="container p-1">
  <h1>Opacity Classes <small>Bootstrap 4</small></h1>


<h3>.opacity-0</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-0">
</figure>
<h3>.opacity-1</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-1">
</figure>
<h3>.opacity-2</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-2">
</figure>
<h3>.opacity-3</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-3">
</figure>
<h3>.opacity-4</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-4">
</figure>
<h3>.opacity-5</h3>
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-5">
</figure>
  
  <h3>change opacity on hover .opacity-0h5</h3>
  <p>the number before the h sets the initial value and the number after the h sets the hover value</p>
  <a href="#">
<figure class="bg-dark d-inline-block">
  <img src="https://placeimg.com/640/80/arch" alt="placeholder-image" class="opacity-0h5">
</figure>
  </a>
  
  
  </div>
.opacity-0 {
  opacity:0!important;
}
.opacity-1 {
  opacity:0.2!important;
}
.opacity-2 {
  opacity:0.4!important;
}
.opacity-3 {
  opacity:0.6!important;
}
.opacity-4 {
  opacity:.8!important;
}
.opacity-5 {
  opacity:1!important;
}

/* Maybe even support hover opacity shifts */
.opacity-0h5 {
  opacity:0!important;
  transition: opacity .25s ease-in-out!important;
  -moz-transition: opacity .25s ease-in-out!important;
  -webkit-transition: opacity .25s ease-in-out!important;
}
.opacity-0h5:hover {
  opacity:1!important;
}

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js