/* ++++++++++++++  image hover before after effect  ++++++++++++++ */
div.beforeandafter { /* main container */
	background: white;
	border: 1px solid gray;
	display: block;
	width: 330px; /* width of largest image width */
	height: 192px; /* height of largest image height */
	overflow: hidden;
	position: relative; /* important */
}

div.before, div.after{ /* before and after DIVs within main container */
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
	transition: all 1s ease-in-out; /* CSS transition. */
	z-index: 100;
}

div.after{
	z-index: 1; /* z-index of after div should be smaller than before's */
}

div.beforeandafter:hover div.before{ /* onmouseover main container */
	height: 0; /* change "before" div width to 0 to hide it */
}
.navbar-brand{
  text-align:  center;
  width: 100%
}