Image Grid linking to Text List using CSS only

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.

Changing Opacity on Image upon Hover using CSS

This is a really easy and good way to change your image from some opacity to full opacity when hovered over, and got it from here.

MAMP

Today, I installed MAMP. I have been getting a lot of requests to build websites that can be easily edited, and although HTML and CSS have served me well in building websites so far, I need to integrate CMS as well.  After some research, I have come to a conclusion I need to learn how to build on Wordpress. I've used Wordpress before to set up blogs but stopped using it because it didn't seem as user friendly as Blogger with its millions of functions I didn't seem to need. But now, I'm going back to it as it seems worth learning for building websites that people can easily update.

I was told by a friend that MAMP was a really good program to use to test build a Wordpress site remotely. She showed me how to set it up but I forgot! So I watched this video which has much more set up processes than I remember, but it was easy to follow and now I'm all set up. 

 

Pure CSS Image Gallery with Next and Previous Buttons

I have been searching high and low to find an image gallery with previous and next buttons for a project I am working on. I thought it would a pretty easy thing to find since it was a really simple feature but the only place I found a decent example was here on CSS Play which is an amazing site to find lots of CSS goodies.

I later added the images and changed a few more things to suit what I was working on but I thought since it was something I couldn't find easily, may there were others would would like a basic template. Here is a pen to a demo, HTML, and CSS code.  

Of course, change things to suit your design. So I hope you find this helpful and should you find any errors, please let me know.

CSS Accordion Menu

I needed to make a vertical navigation menu as part a website and again, I wanted to find a method that didn't use Javascript. And if CSS can do a similar trick, why not? 

I found really good and easy to follow instructions here. And there is a slightly more jazzed up version that slides out.

I used the normal one as I preferred the old school style and here is the result.

                

When you hover over, the submenu pops up. It's not going to be used now, but at least I now know how to do it!

Pure CSS Slideshow

I've been looking for a way to create an image slideshow for my website to show recent work. Usually, JavaScript is used to make it but since I'm still learning HTML and CSS, I wanted to see if there was a way to use just that to get a similar effect.

There are actually quite a lot of different versions out there, some pretty impressive, but I was looking for a simple slideshow with clear instructions and ended up using this one below tweaking a few things to suit my website.

The obvious things I changed were the images, the button colours, the size of the slider, font, text, and various other things. I also added a link to enable the image to change to the next one when clicked on. There were a few things I would have added but after fiddling around for ages and getting no result, I'm going to live without the extras.

But I am very pleased I found this slider as I would have never been able to create it from scratch! (Not now at least.)