Ao passar o mouse em uma imagem aparecer uma lupa no meio dela ?

2,950 views
Skip to first unread message

André da Silva Severino

unread,
Nov 5, 2011, 5:59:24 PM11/5/11
to jquery-br
Boa tarde pessoal,

Alguem poderia me ajudar a criar um efeito ?

É tipo assim: Quando eu passar o mouse na imagem queria que a imagem
ficasse com um preto com opacidade e uma lupa nela (para transmitir a
idéia de 'aumentar'), já vi isso em alguns sites + não lembro de
nenhum no momento, não sei como faço para criar a div e deixar ela
100% no objeto, eu até consegui mostrar a lupa e etc... Mas não
consigo mostrar em cima da imagem :(

--

*
---------------------------------------------------------------------------------------------------------------------------
*
"Eu adoraria mudar o mundo, pena que eles não me fornecem o
código-fonte".
~
\°v°
( . )\ --> open-source
^ ^
*
---------------------------------------------------------------------------------------------------------------------------
*
Email: andredasil...@gmail.com
Url: http://andrewd.com.br

Bruce

unread,
Nov 5, 2011, 8:37:40 PM11/5/11
to jque...@googlegroups.com
Olá André, acho que o que você procura é um efeito como o deste site http://themes.premiumpixels.com/gridlocked/ correto?

Para conseguir este efeito será necessário uma imagem qualquer é uma imagem no formato .png com fundo semi-transparente e uma lupa no centro.

Tendo as duas imagens; você pode criar uma div e dar a ela um display relative, e dentro desta div as duas imagens com position absolute e z-index diferentes, sendo o z-index da imagem da lupa maior do que a outra e seu display setado como none.

Quando o mouse estiver sob a div, o display da imagem da lupa passa para block. Confira os exemplos abaixo:

HTML:

<div class="img">
    <img src="imagem-qualquer.jpg" alt="" />
    <img src="lupa.png" alt="" class="lupa" />
 </div> 


CSS:

div.img{ display:relative}
div.img img{ position:absolute; left:0; top:0}
img.lupa{ display:none;}
div.img:hover img.lupa{ display:block;  }


Bem... espero que tenha entendido da forma que eu expliquei. Boa sorte.


--
Grupo de jQuery Brasil.

REGRAS: http://groups.google.com/group/jquery-br/web/regras-do-grupo

USE O JSBIN.COM / JSFIDDLE.NET  PARA CÓDIGOS.

Email: jque...@googlegroups.com
Biba:   jquery-br+...@googlegroups.com
Site:    http://groups.google.com/group/jquery-br?hl=pt-BR



--

Att. Bruce Emmanuel Sueira
(31) 8884-7448 (OI)
twitter @bruceemmanuel


 605011919638310


Lucas Comino Oliveira

unread,
Nov 5, 2011, 7:31:01 PM11/5/11
to jque...@googlegroups.com
Olá André, blz?

Cara você vai ter que criar esta div da "sombra" e deixar ela com position:absolute e a div da imagem position:relative

Na div sombra você deixa width:100%,  height:100% e display:none;

Assim deve funcionar, no jquery você faz um fadeIn() nela ae você que sabe.

Qualquer coisa estamos ae!

Att.
Lucas Comino

Em 5 de novembro de 2011 19:59, André da Silva Severino <andredasil...@gmail.com> escreveu:



--
Att.
Lucas Comino
Departamento Web / InovaClick Software

Lucas Comino Oliveira

unread,
Nov 5, 2011, 8:05:38 PM11/5/11
to jque...@googlegroups.com
Cara criei um exemplo aqui, ve se é isto mesmo



ou


Qualquer coisa estamos ae!

Att.
Lucas Comino

Bruce

unread,
Nov 6, 2011, 2:05:22 PM11/6/11
to jque...@googlegroups.com
Lucas seu exemplo funciona mas e a lupa que ele quer que apareça? vc vai precisar de outra imagem com esta lupa, ou centralizada na div sombra ou no exemplo que eu dei acima que nem faz uso de jquery.

André da Silva Severino

unread,
Nov 6, 2011, 7:32:52 PM11/6/11
to jque...@googlegroups.com
Olá Bruce e Lucas, obrigado pela ajuda, achei bem interessante e criei
aqui um código simples para fazer esse efeito.

Caso alguém queira está aqui: http://andrewd.com.br/fade/

Caso alguém tenha algum comentário a fazer estou de ouvidos aberto para ouvir (:

2011/11/6, Bruce <bruc...@gmail.com>:


> Lucas seu exemplo funciona mas e a lupa que ele quer que apareça? vc vai
> precisar de outra imagem com esta lupa, ou centralizada na div sombra ou no
> exemplo que eu dei acima que nem faz uso de jquery.
>
> Em 5 de novembro de 2011 22:05, Lucas Comino Oliveira
> <lcom...@gmail.com>escreveu:
>
>> Cara criei um exemplo aqui, ve se é isto mesmo
>>
>>
>> http://lucascomino.com/demos/sombra
>>
>> ou
>>
>> https://gist.github.com/1342220
>>
>> Qualquer coisa estamos ae!
>>
>> Att.
>> Lucas Comino
>> www.lucascomino.com
>>
>> Em 5 de novembro de 2011 21:31, Lucas Comino Oliveira <lcom...@gmail.com
>> > escreveu:
>>
>> Olá André, blz?
>>>
>>> Cara você vai ter que criar esta div da "sombra" e deixar ela com
>>> position:absolute e a div da imagem position:relative
>>>
>>> Na div sombra você deixa width:100%, height:100% e display:none;
>>>
>>> Assim deve funcionar, no jquery você faz um fadeIn() nela ae você que
>>> sabe.
>>>
>>> Qualquer coisa estamos ae!
>>>
>>> Att.
>>> Lucas Comino

>>> www.lucascomino.com <http://www.lucascomino.com>

> <http://www.bombeiros.mg.gov.br>


>
> Att. Bruce Emmanuel Sueira
> (31) 8884-7448 (OI)
> twitter @bruceemmanuel
>

> <https://www.redhat.com/wapps/training/certification/verify.html?certNumber=605011919638310>
> 605011919638310

Gilton Guma

unread,
Nov 7, 2011, 8:07:45 AM11/7/11
to jQuery (Brasil)
@André: Dei uma ajustada no seu código => http://jsfiddle.net/NLsrG/

On 6 nov, 22:32, André da Silva Severino
<andredasilvasever...@gmail.com> wrote:
> Olá Bruce e Lucas, obrigado pela ajuda, achei bem interessante e criei
> aqui um código simples para fazer esse efeito.
>
> Caso alguém queira está aqui:http://andrewd.com.br/fade/
>
> Caso alguém tenha algum comentário a fazer estou de ouvidos aberto para ouvir (:
>
> 2011/11/6, Bruce <bruce...@gmail.com>:
>
>
>
>
>
>
>
>
>
> > Lucas seu exemplo funciona mas e a lupa que ele quer que apareça? vc vai
> > precisar de outra imagem com esta lupa, ou centralizada na div sombra ou no
> > exemplo que eu dei acima que nem faz uso de jquery.
>
> > Em 5 de novembro de 2011 22:05, Lucas Comino Oliveira
> > <lcomin...@gmail.com>escreveu:
>
> >> Cara criei um exemplo aqui, ve se é isto mesmo
>
> >>http://lucascomino.com/demos/sombra
>
> >> ou
>
> >>https://gist.github.com/1342220
>
> >> Qualquer coisa estamos ae!
>
> >> Att.
> >> Lucas Comino
> >>www.lucascomino.com
>
> >> Em 5 de novembro de 2011 21:31, Lucas Comino Oliveira <lcomin...@gmail.com
> >> > escreveu:
>
> >> Olá André, blz?
>
> >>> Cara você vai ter que criar esta div da "sombra" e deixar ela com
> >>> position:absolute e a div da imagem position:relative
>
> >>> Na div sombra você deixa width:100%,  height:100% e display:none;
>
> >>> Assim deve funcionar, no jquery você faz um fadeIn() nela ae você que
> >>> sabe.
>
> >>> Qualquer coisa estamos ae!
>
> >>> Att.
> >>> Lucas Comino
> >>>www.lucascomino.com <http://www.lucascomino.com>
>
> >>> Em 5 de novembro de 2011 19:59, André da Silva Severino <
> >>> andredasilvasever...@gmail.com> escreveu:
>
> >>> Boa tarde pessoal,
>
> >>>> Alguem poderia me ajudar a criar um efeito ?
>
> >>>> É tipo assim: Quando eu passar o mouse na imagem queria que a imagem
> >>>> ficasse com um preto com opacidade e uma lupa nela (para transmitir a
> >>>> idéia de 'aumentar'), já vi isso em alguns sites + não lembro de
> >>>> nenhum no momento, não sei como faço para criar a div e deixar ela
> >>>> 100% no objeto, eu até consegui mostrar a lupa e etc... Mas não
> >>>> consigo mostrar em cima da imagem :(
>
> >>>> --
>
> >>>> *
>
> >>>> --------------------------------------------------------------------------- ------------------------------------------------
> >>>> *
> >>>> "Eu adoraria mudar o mundo, pena que eles não me fornecem o
> >>>> código-fonte".
> >>>>        ~
> >>>>     \°v°
> >>>>      ( . )\   --> open-source
> >>>>      ^ ^
> >>>> *
>
> >>>> --------------------------------------------------------------------------- ------------------------------------------------
> >>>> *
> >>>> Email: andredasilvasever...@gmail.com
> > <https://www.redhat.com/wapps/training/certification/verify.html?certN...>
> >  605011919638310
>
> > --
> > Grupo de jQuery Brasil.
>
> > REGRAS:http://groups.google.com/group/jquery-br/web/regras-do-grupo
>
> > USE O JSBIN.COM / JSFIDDLE.NET  PARA CÓDIGOS.
>
> > Email: jque...@googlegroups.com
> > Biba:   jquery-br+...@googlegroups.com
> > Site:    http://groups.google.com/group/jquery-br?hl=pt-BR
>
> --
>
> *
> --------------------------------------------------------------------------- ------------------------------------------------
> *
> "Eu adoraria mudar o mundo, pena que eles não me fornecem o
> código-fonte".
>         ~
>      \°v°
>       ( . )\   --> open-source
>       ^ ^
> *
> --------------------------------------------------------------------------- ------------------------------------------------
> *
> Email: andredasilvasever...@gmail.com
> Url:http://andrewd.com.br

Lucas Comino Oliveira

unread,
Nov 7, 2011, 9:26:42 AM11/7/11
to jque...@googlegroups.com
Opa André legal que deu certo então.

Gilton ficou filé os ajustes em!

Precisando estamos ae!

Att.
Lucas Comino

2011/11/7 Gilton Guma <gilto...@gmail.com>

Felipe Rohde

unread,
Nov 7, 2011, 11:33:17 AM11/7/11
to jque...@googlegroups.com
css: cursor:zoom

:)

nao fica muito bonito, mas serve
Reply all
Reply to author
Forward
0 new messages