.wrapper {
  position: relative; 
  
}

.image {
  position:relative;
  display:inline-block;
}
img {
  transition: .5s ease-in-out all;
}
.text {
  font-weight:600;
  font-size:1.25em;
  position: absolute;
  top:0; bottom:0;left:0;right:0;
  display: table;
  vertical-align:middle;
  opacity:0;
  margin: auto;
  width:100%;
}

.text {
  text-align:center;
  transition: .5s ease-in-out all;
}

.image:hover img {
  opacity:.3;
}
.image:hover .text{
  opacity:1;
}/

* @import url('http://example.com/example_style.css'); */

.navbar{
  -webkit-box-shadow: 0px 14px 12px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 14px 12px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 14px 12px 0px rgba(0,0,0,0.75);
}


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/