Learning Report No. 08: Hover which displays image in remote area
sources
onextrapixel.com: How to create pure css rollover to display single or multiple elements at remote area.What I learned
In portfolio sites it is very common for an artist to show various images of the same work. I wanted to have thumbnails of the image, and when hovered the main image would change to the new image. I could simply make the thumbnail a link which would take the user to a new page with that featured image, but that would make for a very large site.
After searching for solutions I found the tutorials which would allow me to hover in one area, and the image would appear in the other. This is done strictly through html/css and with the use of anchors.
How I implemented it
Like my last learning report, I started by implementing the tutorial code on a test .html document, and slowly changing it to make it my own.
Altered CSS code
Altered HTML code
I was unable to successfully implemented it on my site, on my carmex packaging site.
I keep playing with it, but it looks like I need a better understanding in positioning.
As far as learning this tutorial, I was able to make it work. but as far as site usability, I would like the images to stay in their remote location when the thumbnail is clicked. I tried placing one image at the remote location, but it ends up covering up the new images when they try to appear. I'll have to keep working on it, or learn java script.
