body{
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.main{
    display: flex; 
    width: 100%;   
    
}
.item{
    justify-content: space-evenly;
    height: 150px;
    width: 100%;
    display:flex;  
    
}
p{
   text-align: center;
   margin-top: 40px;
   opacity: 0;
}
.item:hover img{
    display: none;
}
    
.item:hover p{
    opacity: 1;
    transition: all 2s ease;
}
.item-1:hover{
    background-color: lightblue;
    transition: all 1s ease;

}
.item-2:hover{
    background-color: wheat;
    transition: all 1s ease;

}
.item-3:hover{
    background-color: gray;
    transition: all 1s ease;

}
.item-4:hover{
    background-color:lightslategray;
    transition: all 1s ease;

}