Enlargement of image on click of thumbnail

HTML & CSS
1

I got stuck here I need to enlarge an image + i need some text near to it on click of thumbnail image.

I have a list in which every option contains one thumbnail image. I want to enlarge it on click of it + need to show some text near it.

How it can be achieved ?

2

If i understand this correctly, you want to be able to click on a thumbnail image, and when a user clicks on the thumbnail the images enlarges and displays text as well?

3

Hi there Ashish_Kwatra,

here is one possible solution…

[code]

untitled document #holder { position:relative; width:15%; padding-bottom:10%; box-sizing:border-box; margin:0 auto; } #holder input{ display:none; } #holder label { position:absolute; width:100%; padding:2px; border:1px solid #999; box-sizing:border-box; background-color:#fff; box-shadow:0 0 0 #999; cursor:pointer; transition:all 2s ease-in-out; } #holder label::after { content:'description'; display:block; padding:0; font-size:0; color:#fff; text-align:center; background-color:#fff; transition:all 2s ease-in-out; } #holder label img { display:block; width:100%; border:1px solid #000; box-sizing:border-box; } #cb:checked~label { width:450%; /************************************************* The margin-left value is the final label width minus the intial label width divided by two. In this case (450-100)/2 = 175 **************************************************/ margin-left:-175%; padding:6px; border:3px solid #999; box-shadow:6px 6px 6px #999; } #cb:checked~label::after { padding:5px 0; font-size:100%; background-color:#333; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.

[/code]

coothead

2 Likes
4

Yes…right.

5

Have you looked into something simple like Lightbox or fancybox

it’s a simple way to post images to your website, there’s a lot more resources, unless you want to code yours from scratch?

Are you building your website with CMS or just HTML/CSS?

6

Hi Lauren,

Sorry for late reply…
I am trying it with just HTML/CSS

It’s been a while I haven’t looked that code but I guess I saw Lightbox but didn’t know why I left to implement this.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.