How we can create a card pick type image gallery using HTML CSS JS? Solution: See this Responsive Animated Gallery With CSS and jQuery, Image Cards Pick.
Previously I have a few gallery related programs, but this is a kind of card select or pick image gallery. Basically, the image gallery is a group of arranged images as a presentation to show the user on the website. Then the user can pick an image by click or tap to see the full size of the image. The gallery could be any kind of, like a grid, cards, 3D element, etc.
Today you will learn to create the Image Cards Pick gallery program. Basically, there are 5 cards, each card contains an image and a text. All the cards arranged and align like one over the other with the left-right and up-down position. With this arrangement you can see a part of every card, then the card will open in full size which you have clicked. And on the second click, it will go back again as it was in the past, this is kind of toggle effect.
So, Today I am sharing the Responsive Animated Gallery With CSS and jQuery. There I have used CSS for styling and jQuery for the toggle open and close feature. And as we know jQuery is a JS library that’s why I am putting this program in the JavaScript category. You can use this program on your website at the portfolio or testimonial sections.
If you are thinking now how this image gallery actually is, then see the preview given below.
Preview Of Image Cards Pick Gallery
See this video preview to getting an idea of how this program looks like.
Live Demo
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Responsive Animated Gallery With CSS and jQuery Source Code
Before sharing source code, let’s talk about it. First, I have created a main div named wrap, and placed two other divs inside it. In the middle of these 3 divs, I have placed 5 image cards with divs. Each card divs contains an image and a span for text. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS, first I have done basic works like size, position, margin, padding, etc. There I have arranged the cards as up-down and left-right to visible a part of every card. I have used CSS :nth-child() command for selecting cards, and arranged using position and transform commands. For animation effect, used CSS @keyframe command.
jQuery handling here the toggle feature for the open and close card in the program. Basically, jQuery adding and removing CSS class according to action. There used JS if{} else{} statements to declare the program on action. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program, you have to create 3 files for that. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Responsive Animated Gallery</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrap"> <div id="container"> <div id="maincontent"> <div class="portfolio"> <img src="https://webdevtrick.com/wp-content/uploads/programming.jpg" alt="Portfolio img"><br> <span class="txt">First Image</span> </div> <div class="portfolio"> <img src="https://webdevtrick.com/wp-content/uploads/hardware.jpg" alt="Portfolio img"><br> <span class="txt">Second Image</span> </div> <div class="portfolio"> <img src="https://webdevtrick.com/wp-content/uploads/gadget.jpg" alt="Portfolio img"><br> <span class="txt">Third Image</span> </div> <div class="portfolio"> <img src="https://webdevtrick.com/wp-content/uploads/design.jpg" alt="Portfolio img"><br> <span class="txt">Fourth Image</span> </div> <div class="portfolio"> <img src="https://webdevtrick.com/wp-content/uploads/cons.jpg" alt="Portfolio img"><br> <span class="txt">Fifth Image</span> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ html, body{ width:100%; height:100%; margin:0; padding:0; } #wrap{ width:100%; height:100%; overflow-x:hidden; overflow-y: visible; position:relative; } body{ font-family: Helvetica, Arial, sans-serif; font-size:12pt; background:#444; color:#352e2a; background-size: cover; background-position: center center; } img{ width:100%; } #container{ margin:60px auto 0 auto; width:100%; max-width:1140px; height:700px; position:relative; -webkit-animation: comein 1.5s ease-in-out; -moz-animation: comein 1.5s ease-in-out; animation: comein 1.5s ease-in-out; } .portfolio{ width:100%; max-width:1000px; position:absolute; right:0; top:0; -webkit-transition: .2s; -moz-transition: .2s; transition: .2s; cursor:pointer; -webkit-box-shadow:-2px 0 3px rgba(0,0,0,0.3); -moz-box-shadow:-2px 0 3px rgba(0,0,0,0.3); box-shadow:-2px 0 3px rgba(0,0,0,0.3); } .portfolio:nth-child(1) { left: 10px; } .portfolio:nth-child(1):hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); left: 0; } .portfolio:nth-child(2) { left: 10%; } .portfolio:nth-child(2):hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); left: 5%; } .portfolio:nth-child(3) { left: 20%; } .portfolio:nth-child(3):hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); left: 15%; } .portfolio:nth-child(4) { left: 30%; } .portfolio:nth-child(4):hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); left: 25%; } .portfolio:nth-child(5) { left: 40%; } .portfolio:nth-child(5):hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); transform: rotate(-2deg); left: 35%; } .opened { z-index: 1000; left:0 !important; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-box-shadow:0 0 3px rgba(0,0,0,0.3); -moz-box-shadow:0 0 3px rgba(0,0,0,0.3); box-shadow:0 0 3px rgba(0,0,0,0.3); width:100%; max-width:1140px; } .opened img{ z-index:5; } .txt{ display:block; margin:-2px 0 0 0; padding-top:20px; width:98%; padding-left:2%; height:33px; background: #f7f7f7; } .circle{ display:inline-block; width:15px; height:15px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background:#efefef; border:1px solid #000; margin-right:6px; cursor:pointer; } .circle:hover{ background:#fff; border:1px solid #ccc; } .circle:active, .activenav, .activenav:hover{ background:#666; border:1px solid #333; } .activenav{ cursor: default; } .circle:last-child{ margin-right: 0; } #loading{ width:100%; height:100%; margin:0; padding:0; top:0; left:0; z-index:10001; position:absolute; } .loader{ display: block; height: 30px; left: 50%; margin: -15px 0 0 -15px; position: absolute; top: 50%; width: 30px; animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; } @-webkit-keyframes comein { 0% { opacity: 0; -webkit-transform: translateY(-3000px); } 80% { opacity: 1; -webkit-transform: translateY(40px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes comein { 0% { opacity: 0; -moz-transform: translateY(-3000px); } 80% { opacity: 1; -moz-transform: translateY(40px); } 100% { -moz-transform: translateY(0); } } @keyframes comein { 0% { opacity: 0; transform: translateY(-3000px); } 80% { opacity: 1; transform: translateY(40px); } 100% { transform: translateY(0); } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Code By Webdevtrick ( https://webdevtrick.com ) $('.portfolio').each(function(index) { $(this).attr('id', 'img' + (index + 1)); }); $('.portfolio').each(function(){ $('#navi').append('<div class="circle"></div>'); }); $('.circle').each(function(index) { $(this).attr('id', 'circle' + (index + 1)); }); $('.portfolio').click(function(){ if($(this).hasClass('opened')){ $(this).removeClass('opened'); $(".portfolio").fadeIn("fast"); $(this).find('.ombra').fadeOut(); $("#navi div").removeClass("activenav"); } else{ var indexi = $("#maincontent .portfolio").index(this) + 1; $(this).addClass('opened'); $(".portfolio").not(this).fadeOut("fast"); $(this).find('.ombra').fadeIn(); $("#circle" + indexi).addClass('activenav'); } }); |
That’s It. Now you have successfully created Responsive Animated Gallery With CSS and jQuery, Image Cards Pick gallery. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
