It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 3 March 2021
Putting large photos in your website might need a big space. Hence, you can put a thumbnail and show the real image size with click. In the code below, the photo is displayed in a small size, and by clicking on it, this photo is displayed in a larger size, which is very useful for sites that have a photo gallery.
<!-- this script is provided by http://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
html, body {
font-family: sans-serif;
padding: 0 1em;
font-size: 19px;
background: #222;
color: #aaa;
text-align: center;
}
p {
margin: 1.5em 0;
color: #aaa;
}
img {
max-height: 50vh;
}
a {
color: inherit;
}
a:hover {
color: #bbb;
}
.italic {
font-style: italic;
}
.small {
font-size: 0.8em;
}
/** LIGHTBOX MARKUP **/
.lightbox {
/* Default to hidden */
display: none;
/* Overlay entire screen */
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* A bit of padding around image */
padding: 1em;
/* Translucent background */
background: rgba(0, 0, 0, 0.8);
}
/* Unhide the lightbox when it's the target */
.lightbox:target {
display: block;
}
.lightbox span {
/* Full width and height */
display: block;
width: 100%;
height: 100%;
/* Size and position background image */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.a_tag {
display:block
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<p>Click the thumbnail below to activate the lightbox</p>
<!-- thumbnail image wrapped in a link -->
<a href="#img1">
<img src="http://www.htmlfreecode.com/files/snowriver.jpg">
</a>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('http://www.htmlfreecode.com/files/snowriver.jpg')"></span>
</a>
<a target="_blank" href="http://www.htmlfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Free Code</a>
<a target='_blank' href='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!