Modal box - Light box with :target, pure CSS

by Emmanuel Garcia

HTML

<!-- ++++++++++++++++++ --><p class="p"><a href="#box"><span class="english"><img src="images/bed.svg" width="40px" height="auto"><br>In the room <br></span>
    <span class="spanish">En la habitación </span></a></p><div id="box"><div id="lightbox-room"><a href="#">X</a>

<center><h2><span style="font-family: 'Avenir Light';" class="name">CLUB REGINA LOS CABOS</span></h2>
<span class="english bold" >WHAT’S IN THE ROOM </span><span class="spanish bold" > EN LA HABITACIÓN</span></center>

<p>       
<span class="english bold" >Hotel w/ Jetted Tub:</span><span class="english" >air conditioning, alarm clock, bath towels, cable TV, dining table, extra blankets/pillows, flat screen TV, hairdryer, housekeeping, iron & ironing board, jetted tub, phone, room service, safe, shampoo & conditioner, smoke/fire alarm, soap & lotion, towel & trash service, and USB charging station.<br></span>
<span class="spanish bold" >Hotel con Tina de Hidromasaje:</span><span class="spanish" >aire acondicionado, reloj con alarma, toallas de baño, TV por cable, comedor, cobijas/almohadas adicionales, TV de pantalla plana, secador de pelo, servicio de limpieza, plancha y tabla para planchar, tina de hidromasaje, teléfono, servicio a la habitación, caja de seguridad, champú y acondicionador, alarma de humo/fuego, jabón y crema corporal, servicio de toallas y basura y estación USB para cargar aparatos.<br></span>
</p>
<p>       
<span class="english bold" >Hotel w/ Jetted Tub:</span><span class="english" >air conditioning, alarm clock, bath towels, cable TV, dining table, extra blankets/pillows, flat screen TV, hairdryer, housekeeping, iron & ironing board, jetted tub, phone, room service, safe, shampoo & conditioner, smoke/fire alarm, soap & lotion, towel & trash service, and USB charging station.<br></span>
<span class="spanish bold" >Hotel w/ Jetted Tub:</span><span class="spanish" >air conditioning, alarm clock, bath towels, cable TV, dining table, extra blankets/pillows, flat screen TV,...

SCSS

#box,
#lightbox-room {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    background: rgba(0,0,0,.5);
    visibility: collapse;
    opacity: 0;

}
#lightbox-room {
    display: table;
    position: relative;
    width: auto;
    margin: 10% auto 0;
    padding: .5rem;
    background-color: white;
    max-width:80%;
    a {
        float: right;
    }
    p {
        padding: 3rem;
    }
}
#box:target {
    visibility: visible;
    opacity: 1;
    #lightbox-room {
        opacity: 1;
    }
}