CSS only image gallery with thumbnails and zoom - html

Question

Is it possible to have an image gallery with thumbnails and big preview with zoom? Something like cloudzoom but without any JS, jQuery, Scripts etc as all form of 'scripts and actions' are forbidden and will not work.
We can only use HTML5 and CSS3 no scripts
thanks

Answer 1

Look on this. Hope it helps you.
#images-box {
/* The total width of the image-box, mainly for centering */
width: 850px;
margin: 0px auto;
position: relative;
top: 70px;
}
.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 20px 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: 50px;
left: 200px;
}
div[id^=image]:target .close {
display: block;
}
div[id^=image]:target .expand {
display: none;
}
div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }
<div id="images-box">
<div class="holder">
<div id="image-1" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-1"></a>
</div>
</div>
<div class="holder">
<div id="image-2" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-2"></a>
</div>
</div>
<div class="holder">
<div id="image-3" class="image-lightbox">
<span class="close">X</span>
<img src="http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png" alt="earth!">
<a class="expand" href="#image-3"></a>
</div>
</div>
</div>

Answer 2

You can use css hover to implement image zoom. And using hover property you can create a Image zoom gallery pretty much like you want.
Here is a sample for it.
https://codepen.io/Remedy/pen/ZYJrpp
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/58/Pepsi_logo.svg/1280px-Pepsi_logo.svg.png" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
You can also have a look at these links below for complete implementation.
https://codepen.io/elad2412/pen/yfEGp
https://codepen.io/samuelmaggs/pen/ZWpjPN

Answer 3

It is not possible to zoom a image without javascript or JQuery, we need to use a Javascript or JQuery functiononmouseover