Responsive Gallery

Developer
Ghost Rider
Size
2,489 Kb
Views
44,528
  1. Responsive Gallery Previews
  2. Responsive Gallery HTML Codes
  3. Responsive Gallery CSS Codes

How do I make an responsive gallery?

What is a responsive gallery? How do you make a responsive gallery? This script and codes were developed by Ghost Rider on 23 July 2022, Saturday.

Responsive Gallery Previews
IQ Test

Responsive Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>Creative Caption Gallery</h2>
<div class="image-container image-container-num1"> <div class="image image-num1"> <img src="http://lorempixel.com/g/300/300/technics/" /> </div> <div class="caption caption-num1"> <span class="bottom">There's<br>always a siren</span> </div>
</div><br class="break">
<div class="image-container image-container-num2"> <div class="image image-num2"> <img src="http://lorempixel.com/g/200/300/city/" /> </div> <div class="caption caption-num2"> Singing you to shipwreck </div>
</div><br class="break">
<div class="image-container image-container-num3"> <div class="image image-num3"> <img src="http://lorempixel.com/g/300/200/nightlife/" /> </div><br class="break"> <div class="caption caption-num3"> Steer away from these rocks </div>
</div><br class="break">
<div class="image-container image-container-num4"> <div class="image image-num4"> <img src="http://lorempixel.com/g/300/300/transport/" /> </div> <div class="caption caption-num4"> We'd be a walking disaster </div><br class="break">
</div><br class="break">
<div class="image-container image-container-num5"> <div class="image image-num5"> <img src="http://lorempixel.com/g/300/300/abstract/" /> </div> <div class="caption caption-num5"> Just 'cause you feel it </div>
</div><br class="break">
<div class="image-container image-container-num6"> <div class="image image-num6"> <img src="http://lorempixel.com/g/200/200/people/" /> </div> <div class="caption caption-num6"> Doesn't mean it's there. </div>
</div>
<!--EXPERIMENTAL-->
<!--<br class="break">
<div class="image-container image-container-num7"> <div class="image image-num7"> <img src="http://lorempixel.com/g/300/300/animals/" /> </div> <div class="caption caption-num7"> Someone on your shoulder<br> Someone on your shoulder<br> There there! </div>
</div>-->
</body>
</html>

Responsive Gallery - Script Codes CSS Codes

html, body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; border: 0; font-family: "Lato", Segoe UI, Helvetica, sans-serif; font-size: 14px; font-weight: 100; color: #fff; text-align: center;
}
h2 { color: #333; font-size: 45px; margin: 32px;
}
.image-container { display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; background: #fff; cursor: pointer;
}
.image { width: 200px; height: 200px; z-index: 1; transition: all .5s;
}
.image img { max-width: 100%;
}
.caption { width: 200px; height: auto; padding-top: 10px; padding-bottom: 10px; background: rgba(0,0,0,.8); z-index: 2; font-weight: 300; transition: all .5s;
}
.caption-num1 { position: relative; height: 60px; padding: none; transform: rotate(45deg) translateY(-280px) translateX(-50%);
}
.bottom { position: absolute; bottom: 15px; left: 0px; right: 0;
}
.image-container-num1:hover .caption-num1 { transform: rotate(45deg) translateY(-200px) translateX(-50%)
}
.caption-num2 { transform: translateY(140px);
}
.image-container-num2:hover .image-num2 { opacity: .8; transform: translateY(-50%) translateY(0px);
}
.image-container-num2:hover .caption-num2 { transform: translateY(-37px);
}
.image-num3 img { max-width: none; max-height: 100%;
}
.image-num3 { direction: rtl;
}
.caption-num3 { opacity: 0; width: 300px; text-align:right; padding-right: 14px; transform: translateY(-100%);
}
.image-container-num3:hover .image-num3 { transform: translateX(50%);
}
.image-container-num3:hover .caption-num3 { opacity: 1; transform: translateY(-100%) translateX(-114px);
}
.image-container-num4:hover .image-num4 { transform: scale(1.5) rotate(-10deg);
}
.image-container-num4:hover .caption-num4 { transform: translateY(-100%);
}
.image-num5 img { max-width: none; transform: translateY(-50px) translateX(-50px);
}
.caption-num5 { transform: translateY(-100%); opacity: 0;
}
.image-container-num5:hover .image-num5 { transform: rotate(45deg);
}
.image-container-num5:hover .caption-num5 { opacity: 1;
}
.caption-num6 { transform: translateY(-200px) translateY(-100%);
}
.image-container-num6:hover .caption-num6 { transform: translateY(-200px);
}
.image-container-num6:hover .image-num6 { opacity: .5;
}
.caption-num7 { height: 200px; background: none; color: #333; font-size: 20px; opacity: 0;
}
.image-container-num7:hover .caption-num7 { opacity: 1; transform: translateY(-75%);
}
.image-container-num7:hover .image-num7 { transform: scale(1.5); opacity: .15;
}
.break { display: none;
}
@media all and (max-width: 650px) { .image-container { margin: 30px; outline: solid 20px #eee; } .break { display: initial; }
}
Responsive Gallery - Script Codes
Responsive Gallery - Script Codes
Home Page Home
Developer Ghost Rider
Username GhostRider
Uploaded July 23, 2022
Rating 3
Size 2,489 Kb
Views 44,528
Do you need developer help for Responsive Gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ghost Rider (GhostRider) Script Codes
Name
HTML5 City trails
JQuery particles
CSS Img Slider2
A Pen by Ghost Rider
JQuery parallax
CSS Brainbow Menu
Laserz...
Confetti en jQuery
Canvas Heart
Iphone game
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!