*{
    margin: 0%;
    padding: 0%;
    font-family: 'Times New Roman', Times, serif;
    box-sizing: border-box;
}
.contenor{
    background: url(back.jpg);
    background-size: cover;
    background-origin: padding-box;
    display: flex;
    width: 100%;
    height: 100vh;
}
.gallary{
    margin-top: 20px;
    padding-bottom: 20px;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
    justify-content: center;
}
.img-box{
    width: 100px;
    height: 500px;
    margin: auto;
    margin-left: 20px;
    border-radius: 50px;
    background: url(rambabu1.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: width 0.5s;
}
.img-box h3 {
    color: white;
    position: absolute; 
    top: 0px;
    left: 30px;
    opacity: 0;
    transition: bottom 0.5s, opacity 0.5s;
}
.img-box h1 {
    color: white;
    position: absolute; 
    bottom: 0px;
    left: 30px;
    opacity: 0;
    transition: bottom 0.5s, opacity 0.5s;
}

.img-box:nth-child(2){
    background: url(rambabu2.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(3){
    background: url(rambabu3.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(4){
    background: url(rambabu4.jpg);
    background-size: cover;
    background-position: center;
}

.img-box:nth-child(7){
    background: url(rambabu7.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(8){
    background: url(rambabu8.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(9){
    background: url(rambabu9.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(10){
    background: url(rambabu10.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(11){
    background: url(rambabu11.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(12){
    background: url(rambabu12.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(13){
    background: url(rambabu13.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(14){
    background: url(rambabu14.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(15){
    background: url(rambabu15.jpg);
    background-size: cover;
    background-position: center;
}
.img-box:nth-child(16){
    background: url(rambabu16.jpg);
    background-size: cover;
    background-position: center;
}

.img-box:hover{
    width: 300px;
    cursor: pointer;
}
.img-box:hover h3{
    opacity: 1;
    top: 20px;    
}
.img-box:hover h1{
    opacity: 1;
    bottom: 20px;    
}