Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Celinho

Como fazer o efeito das box?

Por , em Desenvolvimento frontend

Recommended Posts

Andre Cristhian    3

Andre Cristhian
Postado

Sim pode ser feito com jquery, mais também apenas com css, você pode usar:

o hover no vermelho para quando passar o mouse mudar a cor e colocar um tempo para que mude por exemplo:

 

O quandro do <a href=""> está branco você passa o mouse ela demora 6 segundos para mudar para o vermelho, o vermelho vem aparecendo bem aos poucos.

 

Para isto utilize o:

 

-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;

 

ficando mais ou menos assim:

 

#a{
background: #fff;
display: block;
}

#a:hover{
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
display:block;
color:#cb282d;
}

 

Veja se funciona e poste a resposta aqui!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

CSS, hover e transition (CSS3).

 

/* Hover effect */
a, .layout-box, .tags a, .box1, .imgs img, .box1 h3, .notify span, .newsletter-button, .price-list-1 li, .post-holder .entry-title a, .categories ul li a, .sf-menu li, input, .pagination ul li a:link, .pagination ul li a:visited { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; behavior: url(js/PIE.htc) }

/*=========================================================================
Service Box
========================================================================= */
.box1 { background:#fff; border:1px solid #eee; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; text-align:center; margin: 0 0 20px 0; padding:30px 0 30px 0; position:relative; behavior: url(js/PIE.htc); }

.imgs { width:92px; height:92px; margin:0 auto; position:relative; z-index:2; }

.imgs img { position:absolute; top:0; left:0; }

.img-2 { opacity:0; z-index:2; }

.box1 h3 { padding: 20px 0 0 0; text-transform: uppercase; }

.box1 p { font-size: 13px; line-height: 18px; font-family: Arial, Helvetica, sans-serif; padding:0 40px; }

.box1:hover { background:#d82b31; border:1px solid #af242c; }

.box1:hover .img-2 { opacity:1; z-index:2; }

.box1:hover .img-1 { opacity:0; }

.box1:hover h3 { color:#fff; text-shadow: 1px 1px 0 #C84233, 2px 2px 0 rgba(0, 0, 0, 0.3); }

.box1:hover p { color:#fff; }

.box2 { background:#fff; border:1px solid #e8e8e8; border-radius:5px; margin: 0 0 20px 0; padding:20px 0 20px 26px; position:relative; overflow:hidden; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mayron Ceccon    5

Mayron Ceccon
Postado

Sou iniciante em JQUERY, mais pelo que eu conheço, poderia ser algo parecido com esse código!

 

<script language="javascript" type="text/javascript" src="jquery.js"></script>
<style>
.fundo{
  background-color: #FF0000;
}
#div1{
  width: 400px;
   	  height: 100px;
   	  float: left;
}
#div2{
  width: 400px;
   	  height: 100px;
   	  float: right;
}
#div3{
  width: 400px;
   	  height: 100px;
   	  float: left;
}
#div4{
  width: 400px;
   	  height: 100px;
   	  float: right;
}

</style>
<script type="text/javascript">
$(document).ready(function(){
	$('div').mouseover(function(){
			$(this).addClass('fundo');			
		});
	$('div').mouseout(function(){
			$(this).removeClass('fundo');
		});	});
</script>
<body>
<div class="css_add" id="div1">
	div 1
</div>
<div class="css_add" id="div2">
	div 2
</div>
<div class="css_add" id="div3">
	div 3
</div>
<div class="css_add" id="div4">
	div 4
</div></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito