Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Gostaria de fazer uma espécime de pop-up de uma imagem com click, exemplo: tenho uma imagem reduzida após eu clicar ela ela abre com seu tamanho real porém o fundo da página fica com opacidade, ou seja, a imagem fica normal porém o conteúdo da página ao redor da imagem fica escuro, e tenha um botão para fechar, assim voltando a página normal. Alguma solução ?
gostaria de algo somente com html e css, nada de javascript ou algo parecido
Bem, você pediu por "alguma solução" e agora mudou os parâmetros. Para o que você quer, é necessário ter JS e não adianta chorar, não custa aprender.
O máximo que você pode fazer é usar os atributos + e :checked para inputs dentro do CSS, mas ainda assim, vai ficar um porcaria e não chegar nem perto do que você quer. Sem contar que você vai precisar replicar seu código para cada imagem que queira dar o "zoom". Isso vai fazer com que o usuário baixe dados desnecessários, sobrecarregando o seu site.
Então se vamos partir de um ponto, vamos partir do "fazer correto".
O que eu consegui preparar pra você só em HTML e CSS com o tempo que tenho agora foi isso: JSFiddle. Não serve nem pra 10% do que pediu, mas ajuda.
Fancybox