.campus {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.big-block {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 500px; /* Set a height for the block */
    transition: transform 0.3s ease; /* Animation on hover */
}

.big-block img {
    width: 100%;
    height: 100%; /* Ensure the image fills the height */
    object-fit: cover; /* Crop the image to fit without stretching */
    transition: transform 0.5s ease; /* Smooth transition for image */
}

.big-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0; /* Start invisible */
    display: flex; /* Center content */
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s; /* Transition for background opacity */
}

.big-block:hover .big-layer {
    opacity: 1; /* Show layer on hover */
}

.big-block:hover img {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
}

.big-layer h3 {
    color: #fff;
    font-size: 26px;
    text-align: center;
    transition: opacity 0.5s; /* Transition for text opacity */
    opacity: 0; /* Start invisible */
}

.big-block:hover .big-layer h3 {
    opacity: 1; /* Show text on hover */
}