I need help with a layout featuring an array of images enclosed within DIV elements.
Here is the code snippet:
<div id='brand'>
<a href='#brand'><img src='brand.jpg' /> </a>
</div>
<div id='fashion'>
<a href='#fashion'><img src='fashion.jpg' /> </a>
</div>
<div id='trend'>
<a href='#trend'><img src='trend.jpg' /> </a>
</div>
<div id='latest'>
<a href='#latest'><img src='latest.jpg' /> </a>
</div>
//The display will look like this:
BrandImage FashionImage TrendImage LatestImage
If I click on any image, I want the layout to change accordingly. For example, if I click on the "TrendImage," it should look like this:
BrandImage FashionImage LatestImage
TrendImage Text About Image Clicked
I am new to jQuery and struggling with animating the clicked image to the start position, displaying text based on that image, and rearranging the other images above the clicked one.
--Update
I have updated my code and created a JSFIDDLE for reference:
Although I can now bring the clicked div to the front, I still need assistance with animating it, moving the other divs, and displaying text based on the clicked link.