On one of the client projects I'm working on at the moment, I have been asked to make an image grid gallery with text listed on the side of the grid. All the images have a slight opacity and when hovered over, the image will show full opacity, and the text related to the image would also be highlighted. I looked at various sites to see if I could adapt the code but I couldn't get it to work the way I wanted to. But after a lot of testing, I finally managed to come up with something that I'm happy with and works the way it's supposed to. I combined the bits from oneextrapixel, cssplay (the demo was pretty much what I wanted but it used image links in the css), and the image opacity trick from bloggerstop.
I put the image and text in a list and initially I fixed each image individually like the cssplay method but then I fixed the text instead which gave better flexibility. I'm pretty sure this isn't the most refined way to do this. But it serves my purpose for now. I would have liked to have two separate lists. One for the images and the other for text, and get them to interact together somehow but maybe in the future I will figure that one out.
To view a working example, please visit this pen. As with the rest of the codes I have given out, if there are any errors, do let me know please.
No comments:
Post a Comment