.hovereffect {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer;
  margin-bottom: 25px;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  /*background-color: rgba(75,75,75,0.7);*/
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  /*border-bottom: 9px solid transparent;*/
}

.hovereffect:hover .overlay {
  background-color: rgba(64, 78, 113, 0.4);
    /*border-bottom: 9px solid #FFDC04;*/
}

.hovereffect img {
	display: block;
	position: relative;
	width: 100%;
	-webkit-transition: all .2s linear;
	transition:all .2s linear;  
}

.hovereffect:hover img {
	-ms-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

.hovereffect .titi {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 20px;
  line-height: 100%;
  padding: 10px;
  text-shadow: 2px 2px 4px #000000;
  -webkit-transform: translateY(65px);
  -ms-transform: translateY(65px);
  transform: translateY(65px);
  -webkit-transition: transform 0.35s, color 0.35s;
  transition: transform 0.35s, color 0.35s;
}

.hovereffect:hover .titi {
  -webkit-transform: translateY(55px);
  -ms-transform: translateY(55px);
  transform: translateY(55px);
}



.hovereffect a.info {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
	background-color: transparent;
	-webkit-transition: transform 0.2s, color 0.2s;
	transition: transform 0.2s, color 0.2s;
	font-weight: normal;

}
.barrejaune {position: absolute; height: 5px;background-color: #FFDC04;bottom: 0; width: 0%;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;

}
.hovereffect:hover .barrejaune {
	width: 100%;
}