Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite pessoal,
Gostaria mais uma vez da ajuda dos parceiros aqui.
Tenho 3 imagens fixas na índex do meu site e hoje elas estão com um efeito overlay na cor preta com opacidade em 70% colocadas através do photoshop mesmo...
Mais não gostei muito do resultado e quero colocar uma imagem para ser repetida em cima dessa imagem que já existe e está com position fixed definida no CSS.
Por favor vejam no site abaixo o exemplo do que quero fazer.
As imagens apresentadas no site acima possuem uma imagem fazendo o efeito overlay e sendo repetida em cima de outras imagens, como é o caso das imagens do Steve Jobs, a imagem dos testemunhos dos clientes, etc.
Então é isso, gostaria de saber como fazer esse efeito no CSS para por em cima das imagens que já possuo no meu site.
Opa parceiro, boa noite.
Desde já agradeço pela colaboração.
Acho que você não entendeu o que eu quero... na verdade não quero criar o efeito parallax ( que são várias imagens juntas criando um movimento ), mais sim colocar um efeito overlay.
Olhando o link acima e vendo em as imagens que tem o Steve Jobs e os testemunhos dos clientes, pode olhar que existe uma imagem ( http://www.cafecomideias.com.br/images/pattern.png ) que está sendo repetida por cima de uma outra imagem usando a propriedade repeat do css.
Esse o efeito que quero fazer e não estou conseguindo.
Então quero criar esse mesmo efeito
E ae man, blzs?
Então, no caso deles é um PNG com um pixel transparente e o outro preto com transparência.
E a DIV com o pattern, tem position: absolute; com W e H 100%.
Preciso testar, mas tenho quase certeza que é possível fazer com múltiplos backgrounds.
Qualquer coisa posta seu código que vou lhe ajudando.
Abs!
Como dito aí, basicamente criar um outro container sobre o container da imagem e neste novo, aplicar o pattern.
Se a imagem que vai receber o efeito está sendo aplicada como background, uma alternativa seria trabalhar com o pseudo-elemento "after", e aplicar o pattern neste.
Att.
Opa pessoal... boa noite e desde já obrigado pela ajuda.
Segue abaixo html e css de uma das imagens que quero por o pattern:
HTML
<section class="calltoaction">
<div class="row">
<div class="small-12 columns">
<div data-wow-delay="0.3s" class="longshadow wow fadeInDown">Internet de Alta Velocidade?</div>
<div data-wow-delay="0.5s" class="calltoactioninfo wow fadeInUp">
<h2>Mude Para Vostro Telecom</h2>
<h3>LIGAMOS PARA VOCÊ <i class="fa fa-phone-square"></i></h3>
<a href="#" class="small radius button">CLIQUE AQUI</a>
</div>
</div>
</div>
</section>CSS
.calltoaction {padding:50px 0;
background:url(images/ligo_ja_index.jpg);
background-repeat: no-repeat;
moz-background-size: 100% 100%;
background-attachment: fixed;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
max-width:100%;
height:auto;
overflow:hidden;}Meu HTML e CSS estão como acima, quero colocar o pattern por cima dessa imagem :
background:url(images/ligo_ja_index.jpg)
Como já havia sugerido, uma das maneiras é trabalhar com o pseudo-elemento "after".
.calltoaction::after {
content: '';
background: url('seu_pattern_png') repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Lembre-se de acrescentar um "position:relative;" a sua classe ".calltoaction".
Att.
Procura por: efeito parallax.
abs!