Jump to content

Como substiruir uma instrução que usa a Tag img pela que carrega a imagem como background da DIV ?


jcvilanova

Postagens Recomendadas

Galera, sou novo em PHP, web etc. Estou criando uma pagina dinamica com MVC. Em um determinado ponto eu usei o seguinte código para preencher uma DIV com uma imagem do meu BD:
 

<div class="col mx-3 my-3 doub1 effect" style="background-image: url('<?php echo URL . 'assets/imagens/artigo/' . $imag; ?>'); width: 450px; height: 350px;">



e aproveitei para colocar um H2 que vai pegar o campo nome e um <p> que pega a descricão.
 

<h2><?php echo $nome; ?></h2>
<p><?php echo $descri; ?></p>



Pois bem... a div é preenchida completamente pela imagem e o Título e a descrição ficam por cima. Eu queria muito aplicar algum efeito interessante sobre essa imagem e encontrei na NET um exemplo em que ao passar o mouse sobre a imagem ela irá deslizar para a direita e mostrará a legenda com o título e a descrição. Vejam:

<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>



O grande problema é que eu não usei a tag img no meu exemplo, como voces viram eu coloquei a imagem no background-image da DIV. Agora nao estou conseguindo aplicar o efeito na minha página porque não sei como adaptar esse código aí com o meu.
Como eu poderia usar esse exemplo no meu código ou mudar o meu código para usar esse ai sem causar danos aos resultados que já tenho ?

Link to comment
Compartilhe em outros sites

  • 1 month later...

Para mover o background você pode usar a propriedade "background-position". Se quiser uma explicação mais detalhada dá uma olhada na w3schools.

/* Imagem centralizada */
div {
  background-image: url('imgem.jpg');
  background-position: center center;
}

/* Imagem canto superior esquerdo */
div {
  background-image: url('imgem.jpg');
  background-position: left top;
}

/* Imagem 30% da amrgem esquerda e -20% da margem inferior */
div {
  background-image: url('imgem.jpg');
  background-position: 30% -20%;
}

/* Imagem -100 pixels da margem esquerda e -50 pixels da margem inferior  */
div {
  background-image: url('imgem.jpg');
  background-position: -100px -50px;
}

 

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...