Make my html image gallery piece together like a collage [closed]

I need to make the images in my html image gallery fit and piece together like a collage

Hi,

I’m trying to make this an all-round well written question. I will provide the code files (although the css and js are huge) and the link to the page with the issue, provide any further info that anybody needs to assist me and try to explain the question clearly through this paragraph:

I am doing a lightbox image gallery on my website on a page devoted to testing this gallery before it is published. At the moment, all images are set to 200 x 200 px. This makes them all sit uniform and together – however, some pictures have a longer length and a smaller width (portrait ways) so will need to be a larger size. I would like the pictures on the row below the image that needs to be longer to slot and fit around the image in a collage style. At the moment, the entire row below the image just sits lower.

Issue 2 – why are some of the images huge when you click into them and some small? Do you have suggestions for a good site to use that pixel resizes them?

The image I have tried to experiment with being longer is "blue-reflections.png"

PAGE LINK

Please be aware it will take up to 15 seconds to load the entire page but the fancy loading gif makes that time feel way shorter 🙂

rogersartwork.co.uk/gallerytesting/gallery.html

HTML (including a small CSS File)

<html>     <head>         <title>Gallery</title>         <meta name="viewport" content="width=device-width, initial-scale=1">         <link rel="stylesheet" type="text/css" href="lightbox.min.css">         <script src="lightbox-plus-jquery.min.js"></script>     </head>     <body>         <div id="loading">             <p id="loading-message">Gallery Loading...</p>             <p id="loading-message">This page takes longer to load the first time you view it.</p>             <img id="loading-gif" src="/images/loading.gif"/>         </div>         <div class="gallery">             <a href="/gallery_files/abstract-1.png" data-lightbox="mygallery" data-title="Abstract 1"><img class="gallery-image" src="/gallery_files/abstract-1.png"/></a>             <a href="/gallery_files/abstract-2.png" data-lightbox="mygallery" data-title="Abstract 2"><img class="gallery-image" src="/gallery_files/abstract-2.png"/></a>             <a href="/gallery_files/abstract-3.png" data-lightbox="mygallery" data-title="Abstract 3"><img class="gallery-image" src="/gallery_files/abstract-3.png"/></a>             <a href="/gallery_files/a-pair-of-pears.png" data-lightbox="mygallery" data-title="A Pair of Pears"><img class="gallery-image" src="/gallery_files/a-pair-of-pears.png"/></a>             <a href="/gallery_files/attracted-to-the-light.png" data-lightbox="mygallery" data-title="Attracted to the Light"><img class="gallery-image" src="/gallery_files/attracted-to-the-light.png"/></a>             <a href="/gallery_files/blossoms-in-the-wind.png" data-lightbox="mygallery" data-title="Blossoms in the Wind"><img class="gallery-image" src="/gallery_files/blossoms-in-the-wind.png"/></a>             <a href="/gallery_files/blue-abstract.png" data-lightbox="mygallery" data-title="Blue Abstract"><img class="gallery-image" src="/gallery_files/blue-abstract.png"/></a>             <a href="/gallery_files/blue-mermaid.png" data-lightbox="mygallery" data-title="Blue Mermaid"><img class="gallery-image" src="/gallery_files/blue-mermaid.png"/></a>             <a href="/gallery_files/blue-poppies.png" data-lightbox="mygallery" data-title="Blue Poppies"><img class="gallery-image" src="/gallery_files/blue-poppies.png"/></a>             <a href="/gallery_files/blue-reflection.png" data-lightbox="mygallery" data-title="Blue Reflection"><img src="/gallery_files/blue-reflection.png" height=380px width=180px/></a>             <a href="/gallery_files/bubbles-3.png" data-lightbox="mygallery" data-title="Bubbles 3"><img class="gallery-image" src="/gallery_files/bubbles-3.png"/></a>             <a href="/gallery_files/candy-floss.png" data-lightbox="mygallery" data-title="Candy Floss"><img class="gallery-image" src="/gallery_files/candy-floss.png"/></a>             <a href="/gallery_files/catch-of-the-day.png" data-lightbox="mygallery" data-title="Catch of the Day"><img class="gallery-image" src="/gallery_files/catch-of-the-day.png"/></a>             <a href="/gallery_files/champagne-bubbles.png" data-lightbox="mygallery" data-title="Champagne Bubbles"><img class="gallery-image" src="/gallery_files/champagne-bubbles.png"/></a>             <a href="/gallery_files/chinese-bridge.png" data-lightbox="mygallery" data-title="Chinese Bridge"><img class="gallery-image" src="/gallery_files/chinese-bridge.png"/></a>             <a href="/gallery_files/christmas-eve.png" data-lightbox="mygallery" data-title="Christmas Eve"><img class="gallery-image" src="/gallery_files/christmas-eve.png"/></a>             <a href="/gallery_files/cocktail.png" data-lightbox="mygallery" data-title="Cocktail"><img class="gallery-image" src="/gallery_files/cocktail.png"/></a>             <a href="/gallery_files/copper-and-gold.png" data-lightbox="mygallery" data-title="Copper and Gold"><img class="gallery-image" src="/gallery_files/copper-and-gold.png"/></a>             <a href="/gallery_files/crystal-rain.png" data-lightbox="mygallery" data-title="Crystal Rain"><img class="gallery-image" src="/gallery_files/crystal-rain.png"/></a>             <a href="/gallery_files/daisies.png" data-lightbox="mygallery" data-title="Daisies"><img class="gallery-image" src="/gallery_files/daisies.png"/></a>             <a href="/gallery_files/deco.png" data-lightbox="mygallery" data-title="Deco"><img class="gallery-image" src="/gallery_files/deco.png"/></a>             <a href="/gallery_files/deco-gold.png" data-lightbox="mygallery" data-title="Deco Gold"><img class="gallery-image" src="/gallery_files/deco-gold.png"/></a>             <a href="/gallery_files/deco-window.png" data-lightbox="mygallery" data-title="Deco Window"><img class="gallery-image" src="/gallery_files/deco-window.png"/></a>             <a href="/gallery_files/disappearing-mermaid.png" data-lightbox="mygallery" data-title="Disappearing Mermaid"><img class="gallery-image" src="/gallery_files/disappearing-mermaid.png"/></a>             <a href="/gallery_files/down-in-the-dell.png" data-lightbox="mygallery" data-title="Down in the Dell"><img class="gallery-image" src="/gallery_files/down-in-the-dell.png"/></a>             <a href="/gallery_files/dragon.png" data-lightbox="mygallery" data-title="Dragon"><img class="gallery-image" src="/gallery_files/dragon.png"/></a>             <a href="/gallery_files/dragon-2.png" data-lightbox="mygallery" data-title="Dragon 2"><img class="gallery-image" src="/gallery_files/dragon-2.png"/></a>             <a href="/gallery_files/dragons-breath.png" data-lightbox="mygallery" data-title="Dragon's Breath"><img class="gallery-image" src="/gallery_files/dragons-breath.png"/></a>             <a href="/gallery_files/dragons-eye.png" data-lightbox="mygallery" data-title="Dragon's Eye"><img class="gallery-image" src="/gallery_files/dragons-eye.png"/></a>             <a href="/gallery_files/dream-catcher.png" data-lightbox="mygallery" data-title="Dream Catcher"><img class="gallery-image" src="/gallery_files/dream-catcher.png"/></a>             <a href="/gallery_files/ebb-tide.png" data-lightbox="mygallery" data-title="Ebb Tide"><img class="gallery-image" src="/gallery_files/ebb-tide.png"/></a>             <a href="/gallery_files/fairies-dell.png" data-lightbox="mygallery" data-title="Fairies Dell"><img class="gallery-image" src="/gallery_files/fairies-dell.png"/></a>             <a href="/gallery_files/fire-and-ice.png" data-lightbox="mygallery" data-title="Fire and Ice"><img class="gallery-image" src="/gallery_files/fire-and-ice.png"/></a>             <a href="/gallery_files/flames.png" data-lightbox="mygallery" data-title="Flames"><img class="gallery-image" src="/gallery_files/flames.png"/></a>             <a href="/gallery_files/flowers.png" data-lightbox="mygallery" data-title="Flowers"><img class="gallery-image" src="/gallery_files/flowers.png"/></a>             <a href="/gallery_files/flying-a-kite.png" data-lightbox="mygallery" data-title="Flying A Kite"><img class="gallery-image" src="/gallery_files/flying-a-kite.png"/></a>             <a href="/gallery_files/girl-blowing-bubbles.png" data-lightbox="mygallery" data-title="Girl Blowing Bubbles"><img class="gallery-image" src="/gallery_files/girl-blowing-bubbles.png"/></a>             <a href="/gallery_files/girl-with-blue-umbrella.png" data-lightbox="mygallery" data-title="Girl with Blue Umbrella"><img class="gallery-image" src="/gallery_files/girl-with-blue-umbrella.png"/></a>             <a href="/gallery_files/girl-with-rainbow-umbrella.png" data-lightbox="mygallery" data-title="Girl with Rainbow Umbrella"><img class="gallery-image" src="/gallery_files/girl-with-rainbow-umbrella.png"/></a>             <a href="/gallery_files/go-away-rain.png" data-lightbox="mygallery" data-title="Go Away Rain"><img class="gallery-image" src="/gallery_files/go-away-rain.png"/></a>             <a href="/gallery_files/golden-rain.png" data-lightbox="mygallery" data-title="Golden Rain"><img class="gallery-image" src="/gallery_files/golden-rain.png"/></a>             <a href="/gallery_files/green-reflections.png" data-lightbox="mygallery" data-title="Green Reflections"><img class="gallery-image" src="/gallery_files/green-reflections.png"/></a>             <a href="/gallery_files/icicles.png" data-lightbox="mygallery" data-title="Icicles"><img class="gallery-image" src="/gallery_files/icicles.png"/></a>             <a href="/gallery_files/jaws.png" data-lightbox="mygallery" data-title="Jaws"><img class="gallery-image" src="/gallery_files/jaws.png"/></a>             <a href="/gallery_files/jellyfish-2.png" data-lightbox="mygallery" data-title="Jellyfish 2"><img class="gallery-image" src="/gallery_files/jellyfish-2.png"/></a>             <a href="/gallery_files/jellyfish-rising.png" data-lightbox="mygallery" data-title="Jellyfish Rising"><img class="gallery-image" src="/gallery_files/jellyfish-rising.png"/></a>             <a href="/gallery_files/jewels.png" data-lightbox="mygallery" data-title="Jewels"><img class="gallery-image" src="/gallery_files/jewels.png"/></a>             <a href="/gallery_files/kaleidoscope.png" data-lightbox="mygallery" data-title="Kaleidoscope"><img class="gallery-image" src="/gallery_files/kaleidoscope.png"/></a>             <a href="/gallery_files/kingfisher.png" data-lightbox="mygallery" data-title="Kingfisher"><img class="gallery-image" src="/gallery_files/kingfisher.png"/></a>             <a href="/gallery_files/lady-with-blue-hair.png" data-lightbox="mygallery" data-title="Lady with Blue Hair"><img class="gallery-image" src="/gallery_files/lady-with-blue-hair.png"/></a>             <a href="/gallery_files/lava-explosion.png" data-lightbox="mygallery" data-title="Lava Explosion"><img class="gallery-image" src="/gallery_files/lava-explosion.png"/></a>             <a href="/gallery_files/lava-flow.png" data-lightbox="mygallery" data-title="Lava Flow"><img class="gallery-image" src="/gallery_files/lava-flow.png"/></a>             <a href="/gallery_files/lightning-strike.png" data-lightbox="mygallery" data-title="Lightning Strike"><img class="gallery-image" src="/gallery_files/lightning-strike.png"/></a>             <a href="/gallery_files/lions-eye.png" data-lightbox="mygallery" data-title="Lion's Eye"><img class="gallery-image" src="/gallery_files/lions-eye.png"/></a>             <a href="/gallery_files/love-in-the-mist.png" data-lightbox="mygallery" data-title="Love in the Mist"><img class="gallery-image" src="/gallery_files/love-in-the-mist.png"/></a>             <a href="/gallery_files/mermaid-arising.png" data-lightbox="mygallery" data-title="Mermaid Arising"><img class="gallery-image" src="/gallery_files/mermaid-arising.png"/></a>             <a href="/gallery_files/midnight-forest.png" data-lightbox="mygallery" data-title="Midnight Forest"><img class="gallery-image" src="/gallery_files/midnight-forest.png"/></a>             <a href="/gallery_files/moonlight-rays.png" data-lightbox="mygallery" data-title="Moonlight Rays"><img class="gallery-image" src="/gallery_files/moonlight-rays.png"/></a>             <a href="/gallery_files/moon-walking.png" data-lightbox="mygallery" data-title="Moon Walking"><img class="gallery-image" src="/gallery_files/moon-walking.png"/></a>             <a href="/gallery_files/mountains.png" data-lightbox="mygallery" data-title="Mountains"><img class="gallery-image" src="/gallery_files/mountains.png"/></a>             <a href="/gallery_files/mountains-2.png" data-lightbox="mygallery" data-title="Mountains 2"><img class="gallery-image" src="/gallery_files/mountains-2.png"/></a>             <a href="/gallery_files/mountain-scape.png" data-lightbox="mygallery" data-title="Mountain Scape"><img class="gallery-image" src="/gallery_files/mountain-scape.png"/></a>             <a href="/gallery_files/new-york.png" data-lightbox="mygallery" data-title="New York"><img class="gallery-image" src="/gallery_files/new-york.png"/></a>             <a href="/gallery_files/norfolk-broads.png" data-lightbox="mygallery" data-title="Norfolk Broads"><img class="gallery-image" src="/gallery_files/norfolk-broads.png"/></a>             <a href="/gallery_files/northern-lights.png" data-lightbox="mygallery" data-title="Northern Lights"><img class="gallery-image" src="/gallery_files/northern-lights.png"/></a>             <a href="/gallery_files/octopuses-treasure.png" data-lightbox="mygallery" data-title="Octopuses Treasure"><img class="gallery-image" src="/gallery_files/octopuses-treasure.png"/></a>             <a href="/gallery_files/on-reflection.png" data-lightbox="mygallery" data-title="On Reflection"><img class="gallery-image" src="/gallery_files/on-reflection.png"/></a>             <a href="/gallery_files/palm-trees.png" data-lightbox="mygallery" data-title="Palm Trees"><img class="gallery-image" src="/gallery_files/palm-trees.png"/></a>             <a href="/gallery_files/pencils.png" data-lightbox="mygallery" data-title="Pencils"><img class="gallery-image" src="/gallery_files/pencils.png"/></a>             <a href="/gallery_files/peppers.png" data-lightbox="mygallery" data-title="Peppers"><img class="gallery-image" src="/gallery_files/peppers.png"/></a>             <a href="/gallery_files/pond-life.png" data-lightbox="mygallery" data-title="Pond Life"><img class="gallery-image" src="/gallery_files/pond-life.png"/></a>             <a href="/gallery_files/poppies.png" data-lightbox="mygallery" data-title="Poppies"><img class="gallery-image" src="/gallery_files/poppies.png"/></a>             <a href="/gallery_files/psychedelic-hurricane.png" data-lightbox="mygallery" data-title="Psychedelic Hurricane"><img class="gallery-image" src="/gallery_files/psychedelic-hurricane.png"/></a>             <a href="/gallery_files/purple-fantasy.png" data-lightbox="mygallery" data-title="Purple Fantasy"><img class="gallery-image" src="/gallery_files/purple-fantasy.png"/></a>             <a href="/gallery_files/purple-reflections.png" data-lightbox="mygallery" data-title="Purple Reflections"><img class="gallery-image" src="/gallery_files/purple-reflections.png"/></a>             <a href="/gallery_files/red-abstract.png" data-lightbox="mygallery" data-title="Red Abstract"><img class="gallery-image" src="/gallery_files/red-abstract.png"/></a>             <a href="/gallery_files/red-rain.png" data-lightbox="mygallery" data-title="Red Rain"><img class="gallery-image" src="/gallery_files/red-rain.png"/></a>             <a href="/gallery_files/red-sands.png" data-lightbox="mygallery" data-title="Red Sands"><img class="gallery-image" src="/gallery_files/red-sands.png"/></a>             <a href="/gallery_files/redwood-forest.png" data-lightbox="mygallery" data-title="Redwood Forest"><img class="gallery-image" src="/gallery_files/redwood-forest.png"/></a>             <a href="/gallery_files/rockpool.png" data-lightbox="mygallery" data-title="Rockpool"><img class="gallery-image" src="/gallery_files/rockpool.png"/></a>             <a href="/gallery_files/roman-bridge.png" data-lightbox="mygallery" data-title="Roman Bridge"><img class="gallery-image" src="/gallery_files/roman-bridge.png"/></a>             <a href="/gallery_files/rose.png" data-lightbox="mygallery" data-title="Rose"><img class="gallery-image" src="/gallery_files/rose.png"/></a>             <a href="/gallery_files/rose-petals.png" data-lightbox="mygallery" data-title="Rose Petals"><img class="gallery-image" src="/gallery_files/rose-petals.png"/></a>             <a href="/gallery_files/roxanne.png" data-lightbox="mygallery" data-title="Roxanne"><img class="gallery-image" src="/gallery_files/roxanne.png"/></a>             <a href="/gallery_files/seascape-abstract.png" data-lightbox="mygallery" data-title="Seascape Abstract"><img class="gallery-image" src="/gallery_files/seascape-abstract.png"/></a>             <a href="/gallery_files/seascape-at-night.png" data-lightbox="mygallery" data-title="Seascape at Night"><img class="gallery-image" src="/gallery_files/seascape-at-night.png"/></a>             <a href="/gallery_files/sea-spray.png" data-lightbox="mygallery" data-title="Sea Spray"><img class="gallery-image" src="/gallery_files/sea-spray.png"/></a>             <a href="/gallery_files/seaweed.png" data-lightbox="mygallery" data-title="Seaweed"><img class="gallery-image" src="/gallery_files/seaweed.png"/></a>             <a href="/gallery_files/shoal.png" data-lightbox="mygallery" data-title="Shoal"><img class="gallery-image" src="/gallery_files/shoal.png"/></a>             <a href="/gallery_files/shoal-of-fish.png" data-lightbox="mygallery" data-title="Shoal of Fish"><img class="gallery-image" src="/gallery_files/shoal-of-fish.png"/></a>             <a href="/gallery_files/snowy-mountains.png" data-lightbox="mygallery" data-title="Snowy Mountains"><img class="gallery-image" src="/gallery_files/snowy-mountains.png"/></a>             <a href="/gallery_files/squid.png" data-lightbox="mygallery" data-title="Squid"><img class="gallery-image" src="/gallery_files/squid.png"/></a>             <a href="/gallery_files/still-life-with-jugs.png" data-lightbox="mygallery" data-title="Still Life with Jugs"><img class="gallery-image" src="/gallery_files/still-life-with-jugs.png"/></a>             <a href="/gallery_files/still-life-with-pear.png" data-lightbox="mygallery" data-title="Still Life with Pear"><img class="gallery-image" src="/gallery_files/still-life-with-pear.png"/></a>             <a href="/gallery_files/sunset.png" data-lightbox="mygallery" data-title="Sunset"><img class="gallery-image" src="/gallery_files/sunset.png"/></a>             <a href="/gallery_files/sunset-in-paradise.png" data-lightbox="mygallery" data-title="Sunset in Paradise"><img class="gallery-image" src="/gallery_files/sunset-in-paradise.png"/></a>             <a href="/gallery_files/the-jellyfish.png" data-lightbox="mygallery" data-title="The Jellyfish"><img class="gallery-image" src="/gallery_files/the-jellyfish.png"/></a>             <a href="/gallery_files/the-kiss.png" data-lightbox="mygallery" data-title="The Kiss"><img class="gallery-image" src="/gallery_files/the-kiss.png"/></a>             <a href="/gallery_files/the-night-before-christmas.png" data-lightbox="mygallery" data-title="The Night Before Christmas"><img class="gallery-image" src="/gallery_files/the-night-before-christmas.png"/></a>             <a href="/gallery_files/the-partys-over.png" data-lightbox="mygallery" data-title="The Party's Over"><img class="gallery-image" src="/gallery_files/the-partys-over.png"/></a>             <a href="/gallery_files/the-reef.png" data-lightbox="mygallery" data-title="The Reef"><img class="gallery-image" src="/gallery_files/the-reef.png"/></a>             <a href="/gallery_files/the-returning-turtles.png" data-lightbox="mygallery" data-title="The Returning Turtles"><img class="gallery-image" src="/gallery_files/the-returning-turtles.png"/></a>             <a href="/gallery_files/the-wave.png" data-lightbox="mygallery" data-title="The Wave"><img class="gallery-image" src="/gallery_files/the-wave.png"/></a>             <a href="/gallery_files/tropical-fish-tank.png" data-lightbox="mygallery" data-title="Tropical Fish Tank"><img class="gallery-image" src="/gallery_files/tropical-fish-tank.png"/></a>             <a href="/gallery_files/tulips.png" data-lightbox="mygallery" data-title="Tulips"><img class="gallery-image" src="/gallery_files/tulips.png"/></a>             <a href="/gallery_files/turquoise-and-brown.png" data-lightbox="mygallery" data-title="Turquoise and Brown"><img class="gallery-image" src="/gallery_files/turquoise-and-brown.png"/></a>             <a href="/gallery_files/waves.png" data-lightbox="mygallery" data-title="Waves"><img class="gallery-image" src="/gallery_files/waves.png"/></a>             <a href="/gallery_files/woodland.png" data-lightbox="mygallery" data-title="Woodland"><img class="gallery-image" src="/gallery_files/woodland.png"/></a>             <a href="/gallery_files/yachts-in-the-mist.png" data-lightbox="mygallery" data-title="Yachts in the Mist"><img class="gallery-image" src="/gallery_files/yachts-in-the-mist.png"/></a>             <a href="/gallery_files/yellow-umbrella.png" data-lightbox="mygallery" data-title="Yellow Umbrella"><img class="gallery-image" src="/gallery_files/yellow-umbrella.png"/></a>                                                                                                                 </div>         <script>             window.addEventListener("load", function(args){             window.setTimeout(function(){             document.getElementById("loading").style.display = "none";     }, 2000); });         </script>     </body>                                    </html>  <style> @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');     /*------------------CSS STARTS HERE------------------*/     .gallery-image {         height: 200px;         width: 200px;         transition: 1s;         padding: 10px;     }          .gallery-image:hover {         transform: scale(1.1);              }          .gallery {         margin: 10px 10px;     }               html {         background-color: #eeeeee;     }      #loading {    width: 100%;    height: 100%;    top: 0px;    left: 0px;    position: fixed;    display: block;    opacity: 0.7;    background-color: #16141c;    z-index: 99; }     #loading-gif {     top: 30%;   left: 40%;   position: absolute;   z-index: 100; }     #loading-message {         font-family: Open Sans;         font-size: 20pt;         color: white;         text-align: center;         padding-top: 40px;     }          .lb-caption {         font-family: Open Sans;         font-size: 30pt;     }   </style> 

Large main gallery CSS file

.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(/images/gallery-loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(/images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(/images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(/images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1} 

There’s a huge JS file but stack won’t let me put that many characters in so the text file can be read here if you need it: JS FILE

Any more info required just let me know.

Thanks

All images on rogersartwork.co.uk © Roger Ricketts 2021