How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.
Tutorial
HTML
copy
<div class="gallery-section"> <img src="lion.jpg" alt="lion" class="img1"> <img src="zebra.jpg" alt="zebra" class="img2"> <img src="owl.jpg" alt="owl" class="img3"> </div>
CSS
copy
body{ max-width: 70%; margin:0 auto; display: flex; flex-direction: column; justify-content: center; height: 50vh; } .gallery-section{ position: relative; } .gallery-section img{ width:40%; position: absolute; z-index:10; transition:all .5s; box-shadow: -3px 1px 5px rgba(0,0,0,.5); } .img1{ left:5rem; } .img2{ left:10rem; top:1rem; } .img3{ left:15rem; top:2rem; } .gallery-section img:hover{ z-index:20; transform: scale(1.2) rotate(-10deg); } .gallery-section:hover img:not(:hover){ transform:scale(.9); opacity:0; } @media screen and (max-width:500px){ .img1{ left:5rem; } .img2{ left:7rem; } .img3{ left:10rem; } }
Related Post(s)
» Learn how to create an overlay effect with CSS
» How To Create A Stacked Gallery Using HTML And CSS Source Code
» Creating A Pure CSS Preloader - Source Code
» How do I wrap text in a pre tag?[SOLVED]
» How to style an hr element using CSS
collections_bookmark Category :: Cssdate_range Published :: 2 months ago At: 04:54 PM
event_note Detailed Date :: Nov 19th, 2020
person Writer :: Code
- RECENT POSTS






Subscribe
- ADVERTISEMENT