About this snippet

Image popout using only CSS3 and HTML5, no JavaScript or external libraries needed. Useful for photographic websites to present photos in higher resolution, a simple popout effect that works on all major browsers.

Size
1.1 KB
Uses
HTML, CSS
Loads
placehold.co
Views
509

Related snippets

<div class="image-popout">
    <input type="checkbox" name="tab" id="image1">
    <label class="l1" for="image1">
        <img src="https://placehold.co/250x250" width="250" height="250" alt="">
    </label>
    <label class="l2" for="image1">
        <img src="https://placehold.co/150x150" width="150" height="150" alt="">
    </label>
</div>
<div class="image-popout">
    <input type="checkbox" name="tab" id="image2">
    <label class="l1" for="image2">
        <img src="https://placehold.co/250x250" width="250" height="250" alt="">
    </label>
    <label class="l2" for="image2">
        <img src="https://placehold.co/150x150" width="150" height="150" alt="">
    </label>
</div>
.image-popout {
	z-index: 9999;
    display: inline-block;
}
.image-popout .l1 {
	display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}
.image-popout .l1 img {
	position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.image-popout input[type="checkbox"] {
	display: none;
}
.image-popout input[type="checkbox"]:checked ~ .l1 {
	display: block;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save