Css lightbox experiment

Developer
Fivera
Size
2,247 Kb
Views
2,024
  1. Css lightbox experiment Previews
  2. Css lightbox experiment HTML Codes
  3. Css lightbox experiment CSS Codes

How do I make an css lightbox experiment?

Visit: http://fivera.net/css-only-image-lightbox-zoom-editable-css-example/original by By Johnny Simpson http://www.inserthtml.com/. What is a css lightbox experiment? How do you make a css lightbox experiment? This script and codes were developed by Fivera on 31 January 2023, Tuesday.

Css lightbox experiment Previews
IQ Test

Css lightbox experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css lightbox experiment</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="images-box"> <div class="holder"> <div id="image-1" class="image-lightbox"> <span class="close"><a href="#">X</a></span> <img src="http://fivera.net/wp-content/uploads/2013/12/earth.jpg" > <a class="expand" href="#image-1"></a> </div> </div>
</body>
</html>

Css lightbox experiment - Script Codes CSS Codes

body { background: #303335;
}
#images-box { /* The total width of the image-box, mainly for centering */ position: relative; top: 15px;
}
.image-lightbox img { /* Inherit the width and height from the parent element */ width: inherit; height: inherit;
}
.holder { /* The width and height, you can change these */ width: 250px; height: 166px; /* Float left, so everything aligns right */ float: left; margin: 0 0px 0 0;
}
.image-lightbox { /* Inherit width and height from the .holder */ width: inherit; height: inherit; padding: 10px; /* Box shadow */ box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background: #fff; border-radius: 5px; /* Position absolutely so we can zoom it out later */ position: absolute; top: 0; font-family: Arial, sans-serif; /* Transitions to provide some eye candy */ -webkit-transition: all ease-in 0.5s; -moz-transition: all ease-in 0.5s; -ms-transition: all ease-in 0.5s; -o-transition: all ease-in 0.5s;
}
.image-lightbox span { display: none;
}
.image-lightbox .expand { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.image-lightbox .close { position: absolute; width: 20px; height: 20px; right: 20px; top: 20px;
}
.image-lightbox .close a { height: auto; width: auto; padding: 5px 10px; color: #fff; text-decoration: none; background: #22272c; box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4); border-radius: 5px; font-weight: bold; float: right;
}
.close a:hover { box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}
div[id^=image]:target { width: 450px; height: 300px; z-index: 5000; top: 1px; left: 25px;
}
div[id^=image]:target .close { display: block;
}
div[id^=image]:target .expand { display: none;
}
Css lightbox experiment - Script Codes
Css lightbox experiment - Script Codes
Home Page Home
Developer Fivera
Username fivera
Uploaded January 31, 2023
Rating 3
Size 2,247 Kb
Views 2,024
Do you need developer help for Css lightbox experiment?

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!

Fivera (fivera) Script Codes
Name
A Pen by Fivera
Css3 buttons
Paper text area
Mac style Doc menu by fivera.net
Css image viewer
Social example 3
Shrink
Rotate
Webkit brithness
Webkits blur
Create amazing blog posts 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!