#flex {
  display:flex;
  flex-wrap:wrap;
  border:5px solid white;
  width:895px;
  height:580px;

}

.container {
  position: relative;
  width: 283px;
  height:175px;
  border:5px solid white;

}

/*
.vert {
  display: block;
  width: 295px;
  height: 160px;
  background-color:green;
  text-align:center;
  color: white;
  font-size: 20px;
  padding:60px 0;
}


.bluee {
  display: block;
  width: 294px;
  height: 202px;
  background-color:blue;
  text-align:center;
  color: white;
  font-size: 20px;
  padding:60px 0;
}

.orangee {
   display: block;
  width: 295px;
  height: 76px;
  background-color:orange;
  text-align:center;
  color: white;
  font-size: 20px;
  padding:59px 0;
}

*/



.overlay {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  height: 194px;
  width: 287px;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(63,165,235); /* blue */
}


.overlay2 {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  height: 193px;
  width: 287px;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(163,201,25); /* green */
}

.overlay3 {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  height: 194px;
  width: 287px;
  opacity: 0;
  transition: .5s ease;
  background-color: rgb(249,134,7); /* orange */
}


.container:hover .overlay, .container:hover .overlay2 , .container:hover .overlay3 {
  opacity: 1;
}

.text {
  color: white;
  font-size: 18px;
  position: absolute;
  top: 100px;
  left: 150px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width:195px;
}

.text a {
  color:white;
  text-decoration:none;  
}

.text a:hover {
  text-decoration:underline;
}

#textscroll img{
  width:287px;
  height:165px;
}

#textscroll p {   
   background: rgba(255, 255,255, 1);  
    color: black;
    width: 290px;
    position:absolute;
     text-align:center;
     top:122px;
    height:44px;  
     font-size:16px;
     font-weight:bold; 
     padding-bottom:10px;
 
   
}

/* Mise en forme theme etre accompagne */




#textscroll .VIEVAS img {
   width: 890px;
  height:595px; 
  position:absolute;
  top:50px;
}

#textscroll .VIEVAS img:hover {
  cursor:pointer;
  opacity:0.80;
}