CSS Image Gallery - no JS! - with transiotn

Developer
Elad Shechter
Size
2,386 Kb
Views
30,360
  1. CSS Image Gallery - no JS! - with transiotn Previews
  2. CSS Image Gallery - no JS! - with transiotn HTML Codes
  3. CSS Image Gallery - no JS! - with transiotn CSS Codes

How do I make an css image gallery - no js! - with transiotn?

To support me please add like to my facebook page http://www.facebook.com/wmp.israel. What is a css image gallery - no js! - with transiotn? How do you make a css image gallery - no js! - with transiotn? This script and codes were developed by Elad Shechter on 13 July 2022, Wednesday.

CSS Image Gallery - no JS! - with transiotn Previews
IQ Test

CSS Image Gallery - no JS! - with transiotn - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Image Gallery - no JS! - with transiotn</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image-gallery"> <div class="title">CSS Image Gallery - NO JS! - with transition</div> <div class="big-image"> <img id="html5" src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s1600/html5.png" /> <img id="css3" src="http://1.bp.blogspot.com/-y7D7mYH3nLE/UFH9cjwJMgI/AAAAAAAAFMQ/5CYN5eyxk14/s1600/css3.png" /> <img id="less" src="http://3.bp.blogspot.com/-VW9cKTGdGT0/UFH7YJPTjdI/AAAAAAAAFMI/tf_X_N9IMOU/s1600/less.png" /> <img id="modern" src="http://2.bp.blogspot.com/-PYBI4ZXF2nM/UFH6ZtVdtDI/AAAAAAAAFMA/Ru7hsk3yNj0/s1600/modernizr2.png" /> <img id="default" src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s1600/html5.png" /> </div> <ul> <li> <a href="#html5"><img src="http://1.bp.blogspot.com/-rGhVbHG6KsI/UGsJkJgZx-I/AAAAAAAAFV4/eVovDPA1loA/s72-c/html5.png" /></a></li> <li> <a href="#css3"><img src="http://1.bp.blogspot.com/-y7D7mYH3nLE/UFH9cjwJMgI/AAAAAAAAFMQ/5CYN5eyxk14/s72-c/css3.png" /></a> </li> <li> <a href="#less"><img src="http://3.bp.blogspot.com/-VW9cKTGdGT0/UFH7YJPTjdI/AAAAAAAAFMI/tf_X_N9IMOU/s72-c/less.png" /></a> </li> <li> <a href="#modern"><img src="http://2.bp.blogspot.com/-PYBI4ZXF2nM/UFH6ZtVdtDI/AAAAAAAAFMA/Ru7hsk3yNj0/s72-c/modernizr2.png" /></a> </li> <a href="https://www.facebook.com/groups/css.master/" target="_blank" class="by">CSS Masters - CSS facebook group ( Done By Elad Shechter)</a>
</div>
</body>
</html>

CSS Image Gallery - no JS! - with transiotn - Script Codes CSS Codes

.image-gallery{ width:300px; background-color:#eec1a6; padding:20px; border-radius:20px; border:solid 1px #c5c5c5;
}
.image-gallery .big-image{ width:159px; height:159px; border:solid 1px gray; padding:10px; margin:0 auto; background-color:white; position:relative;
}
.image-gallery .big-image img{ opacity:0;position:absolute;left:10px;top:10px; margin:0 auto; transition: opacity 350ms;
-moz-transition: opacity 350ms; /* Firefox 4 */
-webkit-transition: opacity 350ms; /* Safari and Chrome */
-o-transition: opacity 350ms; /* Opera */
}
/*Selected image display*/
.image-gallery .big-image img:target{opacity:1;}
/*on select image dusplay none the default image*/
.image-gallery .big-image img:target ~ img#default{opacity:0;}
/*Shoe Default Image in first load*/
.image-gallery .big-image img#default{opacity:1;}
.image-gallery ul{margin-top:15px;}
.image-gallery li{float:left; background-color:rgba(255,255,255,0.5);margin-right:3px;}
.image-gallery li:hover{ background-color:rgba(255,255,255,0.8);
}
/*other styles*/
.title{font-size:20px;font-weight:bold;color:#633317;text-align:center;margin-bottom:15px;}
.by{clear:both;display:block;font-size:12px;text-align:right;color:#633317;padding-top:5px;}
/*reset CSS*/
*{font-family:arial;}
ul,li{list-style:none;margin:0;padding:0;}
CSS Image Gallery - no JS! - with transiotn - Script Codes
CSS Image Gallery - no JS! - with transiotn - Script Codes
Home Page Home
Developer Elad Shechter
Username elad2412
Uploaded July 13, 2022
Rating 3
Size 2,386 Kb
Views 30,360
Do you need developer help for CSS Image Gallery - no JS! - with transiotn?

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!

Elad Shechter (elad2412) Script Codes
Name
Responsive Background Images
Flipping Card - Stage one
CSS Target Event
Css - ellipsis
Flipped card use only CSS
Px to rem
Dynamic element size via CSS position manipulation
Making seperator - select all elements except from the first one
Image Gallery no JS
Color Like Buttons of Facebook
Create amazing art & images 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!