Así que tengo una galería de imágenes de 50 imágenes que se genera seleccionando al azar 50 fotos de un grupo de 500.
El código a continuación funciona bien, pero las imágenes no usan el estilo CSS del archivo HTML en el que se inserta, lo que incluye una vista previa más grande de la imagen al pasar el mouse sobre ella. ¿Cómo podría hacer que funcione?
Gracias
Tengo esto:
function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; document.body.appendChild(img); } for (let i = 1; i<=50;i++ ) { j= Math.floor((Math.random() * 500)+1); source='config/images/file_name_'+j+'.jpg'; show_image(source,100, 100,'File_name_ #'+j); }Código de la galería:
<html> <head> <meta name="Gallery" content="device-width, initial-scale=1.0"> <title>Title</title> <link rel="icon" href="Icon.ico"> <link rel="stylesheet" href="config/menu2-1.css"> </head> <body> <div class="texte"></box><a>Gallery description.</a></div> <div class="img-gallery"> <script src="Gallery.js"> </script> </div> </body> </html>CSS:
body{ margin: 0; padding:0; background: #C0DDF4; font-family: Cochin,Cambria, Georgia, Times, 'Times New Roman', serif; line-height: 0; text-align: center; width: 75%; margin-left: auto; margin-right: auto; } .img-gallery{ margin-top: 10px; margin-left: 0px; left: 25%; top: 10px; width: 100%; } .img-gallery img{ width:100px; height:100px; cursor:pointer; } .img-gallery img:hover{ transform: scale(3 ) rotate(-0deg) translateX(-10px) translateY(-10px); border-radius:5px; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.75); }