https://github.com/shamikaredkar/art-gallery
This digital gallery features a curated selection of photos by artists like Massimo Marganoni, Giuseppe Milo, and Görlitz Photography, each presented in a sleek, responsive format that brings their work to life. Hover over images to discover the artists' names.
https://github.com/shamikaredkar/art-gallery
css3 html5 interactive-ui interactive-user-interface photogallery responsive-layout responsive-web-design webdev webdevelopment
Last synced: 10 days ago
JSON representation
This digital gallery features a curated selection of photos by artists like Massimo Marganoni, Giuseppe Milo, and Görlitz Photography, each presented in a sleek, responsive format that brings their work to life. Hover over images to discover the artists' names.
- Host: GitHub
- URL: https://github.com/shamikaredkar/art-gallery
- Owner: shamikaredkar
- License: gpl-3.0
- Created: 2024-04-18T18:24:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-18T20:09:53.000Z (about 2 years ago)
- Last Synced: 2025-01-20T22:39:04.376Z (over 1 year ago)
- Topics: css3, html5, interactive-ui, interactive-user-interface, photogallery, responsive-layout, responsive-web-design, webdev, webdevelopment
- Language: HTML
- Homepage:
- Size: 3.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Purpose:
This digital gallery features a curated selection of photos by artists like Massimo Marganoni, Giuseppe Milo, and Görlitz Photography, each presented in a sleek, responsive format that brings their work to life. Hover over images to discover the artists' names, enhancing your appreciation for the art and its creator.
---
### Features:
> Interactive overlays with artist names on hover.
>
> Responsive design for optimal viewing on multiple devices.
>
> Elegant and minimalistic design to highlight the photos.
>
---
### Technology Stack:
HTML, CSS
---
### Directory Structure
```lua
/photo-blog
|-- index.html
|-- photos.css
```
---
### Code Documentation:
## HTML
**index.html —** Contains the entire page structure.
- **``**: This is used as the navigation or title area of the webpage.
- **``**: Each section represents a different artist's gallery.
- **`
`**: This container holds each image along with an overlay for the artist's name.
```html
Artist Name
```
##CSS
**photos.css —** Styles the visual elements of the site.
- **`.image-container`**: Styles the containers that hold the images and the overlay text.
- **`nav`**: Styles for the navigation bar to ensure it is visually distinct.
**Image Container (`image-container`)**
```css
.image-container {
position: relative;
width: 30%;
margin: calc(5%/6);
display: inline-block;
}
```
- **Positioning**: Set to **`relative`** which allows absolute positioning of elements inside it, such as the artist's name (**`
`**).
- **Display**: **`inline-block`** allows multiple containers to sit in a line horizontally, given sufficient screen width.
**Image and Hover Effects**
```css
.image-container img {
width: 100%;
opacity: 1;
}
.image-container:hover img{
border-color: black;
box-shadow: 1em 1em 1em -0.5em black;
transform: translateY(-1em);
opacity: 0.5;
}
```
- **Width and Opacity**: The image fills its container (**`100%`** width), and is fully opaque until hovered.
- **Hover Effects**: On hover, the image is dimmed (**`opacity: 0.5`**), lifted (**`translateY`**), and gains a shadow and border color, highlighting the image and making the text more readable.
### Artist Name (**`h3`**)
```css
.image-container h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
width: 100%;
}
```
- **Positioning**: Positioned absolutely in the center of the **`image-container`** using percentages and the **`transform`** property. This central placement ensures the name appears over the middle of the image.
- **Visibility**: Initially hidden (**`opacity: 0`**), it becomes visible (**`opacity: 1`**) when the image container is hovered over, due to the CSS rule in **`.image-container:hover h3`**.
---
### Specific Implementations
CSS Details
- **Image Hover Effect**: The use of **`opacity`** and **`transform`** properties in the **`.image-container:hover img`** selector creates a visual effect that slightly dims the image and moves it up, making the artist's name more prominent.
Choice of Fonts
- Raleway was chosen for its modern and professional look, which complements the artistic photos.
Layout
- A grid layout allows each image to be displayed prominently, making it easy for users to engage with individual pieces of art.