Entre para seguir isso  
Seguidores 0
Reinaldo Carlos

ao passar o mouse na imagem aparece uma mensagem

6 posts neste tópico

bom dia!

gostaria de saver como faço para que quando passar o mouse sobre a imagem aparecer uma mensagem ?

obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

dentro da tag TITLE

<img src="caminho/imagem.png" title="Mensagem aqui!" />

Compartilhar este post


Link para o post
Compartilhar em outros sites

não, não era isso!!!

é uma caixa de mensagem de verdade que aparece sobre a imagem como no site - www.samurailol.com.br

se alguém souber me avise!

obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

se você quer dizer onde fica os Ultimos Post onde tem as imagens menores e quando colocamos o mouse por cima aparece um fundo verde com uma escrita certo? bem se for isso não é dificil ... se for me comunique e já poste o que voce tem feito e qual a sua duvida no desenvolvimento de fazer um.

agora já te peço para que seja mais objetivo nas pergunta você fez uma pergunta cujo a resposta era exatamente acima... tente sempre detalhar o maximo possivel assim agente não passa por isso ^^...

Compartilhar este post


Link para o post
Compartilhar em outros sites

olá novamente!

primeiro desculpe, mas sou novo por aqui, e realmente vocês estão me ajudando muito. obrigado!

e sim, é exatamente isso que preciso, se puder me ajudar com mais esta duvida, agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue ai um exemplo bem basico, o restante é contigo na organização cores imagens para trabalhar e deixar mais bacana.

Dexei comentado o CSS todo para facilitar ... qualquer duvida diga ae.

<style type="text/css">

*{margin:0;padding:0;border:0;list-style:none;outline:none;} /* Fazendo reset */
body{font:normal 14px Tahoma, Arial, sans-serif;color:#333;background:#e5e5e5} /* Fonte normal tamanho 14 tenho Tahoma como fonte primaria */
a{text-decoration:none;} /* Links sem efeitos */

/* Carecteristicas da div. */
#content {
border: 1px solid green;
width: 55%;
height: 60%;

}
/* Carecteristicas de tudo que esta dentro da Div e com Link */
#content ul li a{
display:block;
position:relative;
font-size:12px;
margin:0 auto;
padding: 10px;
float:left;
}

/* Efeitos do texto */
#content ul li a span{
display:block;
padding:10px;
color:#f00;
position:absolute;
bottom:0;
left:0;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
}

/* Efeitos do texto quando o mouse estive em cima da Imagem */ 
#content ul li:hover span{
border: 1px solid f00;
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
}



#content ul li a img{ /* Tamanho da imagem na DIV */
width:320px;
height:240px;

}

#content ul li a span{ /* Espaço da mensagem que ira aparecer */
width:300px;
padding-bottom: 20px;
padding-left: 20px;
}


</style>

    
            <div id="content">
                    <ul>
                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                                <li >
                    <a href="#">
                        <img src="image.jpg" class="attachment-thumbnail wp-post-image" alt="Imagem" title="" />                        
                        <span>Mensagem que deve aparece com o mouse em cima.</span>
                    </a>
                </li>
                
                
                </ul>

Editado por JaguA

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora
Entre para seguir isso  
Seguidores 0