Portfolio

Filterable Image Gallery - HTML CSS JS

Harbour Lights Picturehouse

Burley Stag Suite

ExxonMobil Fawley

Hadrian Hotel

Pizza Pals

The Joiners

Kew Suite

Unique Fashion Clothing

The Webb Collection

Joe's Toms

Ready to make waves

with your brand ?

//3 column images .image-section { display: flex; flex-wrap: wrap; justify-content: space-between; } .image-card { width: 33.33%; /* 3 equal columns */ padding: 20%; /* 20% padding on all sides */ border-radius: 5px; transition: all 0.3s ease-in-out; /* Smooth hover effect transition */ position: relative; /* For overlay effect */ } .image-card a { display: block; /* Ensure link covers the whole card */ height: 100%; /* Link expands to full card height */ width: 100%; /* Link expands to full card width */ text-decoration: none; /* Remove default link underline */ } .main-image, .hover-image { position: absolute; /* Overlap and hide initially */ top: 0; left: 0; width: 100%; height: 100%; } .hover-image { opacity: 0; /* Overlay initially invisible */ } .image-card:hover .hover-image { opacity: 0.5; /* Overlay appears on hover with 50% opacity */ } .image-card:hover .main-image { opacity: 0.8; /* Reduce main image opacity slightly on hover */ }