WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Gallery Filter
1624
Andev.web
Open In Editor
Video
Publish Your Code
0
Recommended
7 September 2024
League of legends slider gallery
18 August 2024
Gallery of sites with hover and blur effect
31 August 2024
CSS Filter cards
HTML
Copy
Andev Web
All
DOG
CAT
OTHERS
Cat | Milo
Playful and affectionate
→
Dog | Rex
Loyal and protective
→
Dog | Bella
Sweet and energetic
→
Dog | Max
Friendly and devoted
→
Cat | Luna
Elegant and curious
→
Cat | Simba
Brave and mischievous
→
Dog | Ringo
Cunning and agile
→
Rabbit | Nube
Gentle and playful
→
Ant | Nano
Diligent and tiny
→
CSS
Copy
body { background-color: #F7F8F8; min-height: 100vh; } .main-content > div { width: 70%; } .main-content { display: flex; justify-content: center; text-align: center; padding-top: 50px; padding-bottom: 50px; } .uk-navbar-nav { justify-content: center; font-family: "Catamaran", sans-serif; gap: 15px; margin-bottom: 35px; } .uk-navbar-nav > li { padding: 0; min-width: 100px; } .uk-navbar-nav>li>a { padding: 15px 35px; display: block; background-color: #fff; color: #222; font-size: 15px; min-height: auto; font-weight: 600; box-shadow: 0 0 25px #cccccc42; border-radius: 7px; transition: 0.5s all ease-in-out; } .uk-navbar-nav>li>a:hover, .uk-navbar-nav>li.uk-active>a { background-color: #7B68EE; color: #fff; } .img-gallery-container > li { position: relative; padding: 10px; margin-top: 5px !important; } .img-gal { height: 415px; width: 100%; object-fit: cover; transition: 0.5s all ease-in-out; border-radius: 6px; } .img-gallery-container > li:hover > img { filter: brightness(0.4) blur(3px); } .float-gallery-content { position: absolute; width: 90%; z-index: -1; background: #fff; padding: 0; margin: 0 auto; left: 0; right: 0; bottom: 0; border-radius: 5px; display: flex; justify-content: space-between; opacity: 0; visibility: hidden; transition: 0.3s all ease-in-out; overflow: hidden; } .img-gallery-container > li:hover .float-gallery-content { bottom: 20px; opacity: 1; visibility: visible; z-index: 9; } .uk-block { display: block; } .float-gallery-content .content { padding: 8px 15px; } .float-gallery-content .content > a { color: #212121; position: relative; bottom: -50px; opacity: 0; transition: all 0.5s; } .float-gallery-content .content > a:hover { color: #7B68EE; } button { border: 0; height: 100%; padding: 5px 15px; background: #7B68EE; font-size: 30px; color: #fff; position: relative; right: -100px; opacity: 0; transition: all 0.5s; } .highlight { color:#7B68EE; font-weight: 600; position: relative; left: -100px; opacity: 0; transition: all 0.5s; } .img-gallery-container > li:hover .highlight { left: 0; opacity: 1; transition-delay: 0.1s; } .img-gallery-container > li:hover button { right: 0; opacity: 1; transition-delay: 0.1s; } .img-gallery-container > li:hover .content > a { bottom: 0; opacity: 1; transition-delay: 0.1s; } @media screen and (max-width: 1100px) { .img-gal { height: 300px; } } @media screen and (max-width: 650px) { .img-gal { height: 225px; } } @media screen and (max-width: 480px) { .img-gal { height: 125px; } }
JS
Copy