Hola chicos, estoy tratando de agregar un gradiente lineal en el iframe de Google Maps, agregué con éxito el div de superposición en el iframe usando conceptos relativos y absolutos de posición, pero si lo hago de esa manera, no puedo acceder al mapa.
.map{ position: relative; } iframe{ z-index: 1; } .overlay{ position: absolute; width: 100%; height: 450px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(51, 51, 51)); top:0; z-index: 0; } <div class="map_section"> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d424143.2713133365!2d150.65178422173113!3d-33.84792702661292!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b129838f39a743f%3A0x3017d681632a850!2sSydney%20NSW%2C%20Australia!5e0!3m2!1sen!2sin!4v1641639710179!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="map_bg" > </iframe> <div class="overlay"></div> </div> </div>