CSS Image Captions

Due to the fact that this is an interactive media project, I wasn't satisfied with the idea of just creating a website as the final product. I wanted to push myself in aspects of coding I hadn't before, so thought a good way to do this was to add interactivity within the images shown of Vivienne Westwood's fashion. When using a lot of images on a website, I felt that it would be something beneficial to have information presented with the image. I didn't just want to add static text to every image as a caption for example, so I began looking into how I could have information appear on rolling over said image,

On researching this, I found a variety of different codes from Javascript to advanced CSS. I wasn't too keen in attempting a code I'd never dealt with before, since I didn't want it to affect the way in which my project developed, so found a great CSS code tutorial that was perfect for the job.

Slide In Captions

The above tutorial was perfect for the job and included some really interesting coding that was purely CSS code, a code that I feel I'm really coming to understand. I had to do some slight tweaking to the coding to make it fit my website, and also then edited the captions for each image.

Also, through the above website, I found a lot more tutorials that will be really helpful for creating simple, clean and effective CSS tricks for future websites.