Formatação de textos e imagens com CSS e HTML
Recentemente saí da minha zona de conforto que é o back-end para me aventurar com o front, porém estou tendo dificuldades em formatar a página conforme tenho ela em mente. A primeira imagem é o resultado ao qual quero chegar, e que ao passar o mouse sobre a imagem apareça algumas informações sobre o post, como um resumo de poucas linhas e outros dados que virão do back-end, já a segunda é o que eu recebo do banco de dados sem nenhum tipo de formatação. Alguém poderia me dar ideias de como fazer isso? Levando claro em consideração que sei apenas o básico de CSS.
[1] - https://i.imgur.com/C33WxNg.png
[2] - https://i.imgur.com/rliOYia.png
O corpo do HTML está da seguinte forma, sendo que os valores entre colchetes são as variáveis que retornam os dados do back-end:
[1] - https://i.imgur.com/C33WxNg.png
[2] - https://i.imgur.com/rliOYia.png
O corpo do HTML está da seguinte forma, sendo que os valores entre colchetes são as variáveis que retornam os dados do back-end:
<div class="posts">
<ul class="postContainer">
{{#each posts}}
<li type="none" class="postContainerLi">
<h1 class="postTitle">{{dataValues.title}}</h1>
<h2 class="postContent">{{dataValues.content}}</h2>
<a href="/posts/delete/{{dataValues.id}}"><button>Delete</button></a>
</li>
{{/each}}
</ul>
</div>
<a href="/posts/new">Novo Post</a>
<a href="/">Início</a>
Vinicius Resende
Curtidas 0
Melhor post
Danton
05/03/2020
A primeira imagem é o resultado ao qual quero chegar, e que ao passar o mouse sobre a imagem apareça algumas informações sobre o post
Esqueci de citar que o projeto funciona como um estilo de blog, se é que isso tem alguma inportancia :)
A opção no css chamada mousehover acredito que seja um começo para você. Posso estar falando asneira, mas mousehover funciona bem nessas horas. Claro que você teria que criar antes uma div submenu. Uma dica para você amigo, é seguir um modelo que criei no HTML para você tentar se basear.
Aqui temos a "div mae", que denominei div="menu", logo após, div="menuint' int vem de interações, mas você pode colocar como quiser, claro!. Na div menu interativo eu fiz uma lista não ordenada onde o objetivo era utilizar o "mousehover" no css para você testar se funciona, tende que adaptar claro!.
<ul>
<li>
<a href="./">Na prática</a> // primeira coisa que aparece no menu.
<img src="assets/img/setinha.png" border="0" width="5"> //imagem que eu coloquei denominando setinha apenas como exemplo.
<div class="submenu"> // esse é o submenu do "Na prática" que criei acima.
<a href="./"><div class="submenuitem">Recomendações</div></a> //quando o mouse passa encima ele mostra essas 3 opções
<a href="./"><div class="submenuitem">Ações no radar</div></a> //
<a href="./"><div class="submenuitem">Estrategias</div></a> //
</div>
</li>
</ul>
No css eu fiz isso:
//esse é o hover que mencionei, ele é aplicado com a variavel menu que coloquei, o li:hover .submenu é para fazer a amostra do submenu quando eu colocar o mouse em cima, sem precisar clicar.
.menu li:hover .submenu{
display: block; //como próprio nome sugere, ele evita que o texto saia da "caixa"
}
.menu a{
color: white;
text-decoration: none; //para não aparecer aquele coisa azul indicando que é link, eu acho mais bonito sem.
}
.submenu{
width: 150px;
background-color: #ff0000;
position: absolute; //para poder colocar ele onde eu quiser, com as dimensões que quiser.
display: none; //para mostrar e não mostrar sem precisar recriar toda hora ( quando o mouse sai de perto da setinha que mencionei acima, ele fecha, com display:none eu evito isso
}
.submenuitem { //apenas estetico do submenu que abre quando passo mouse em cima
width: 140px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.submenuitem:hover{
background-color: #ff5555; // para ter a mesma cor do template menu que eu escolhi
}
Eu consigo tentar contribuir com isso na sua jornada parceiro, obrigado pela tolerância de ler tudo isso, desculpa se for informação sem validade, sou leigo no assunto também. Até mais!
GOSTEI 1
Mais Respostas
Vinicius Resende
05/03/2020
A primeira imagem é o resultado ao qual quero chegar, e que ao passar o mouse sobre a imagem apareça algumas informações sobre o post
Esqueci de citar que o projeto funciona como um estilo de blog, se é que isso tem alguma inportancia :)
GOSTEI 0
Vinicius Resende
05/03/2020
Vou dar uma olhada com calma, agradeço demais por dedicar seu tempo tentando explicar. Já sobre a formatação dos textos em tela eu tenho tentado utilizar o "display: inline-block" que aparentemente me parece ser o correto a se fazer, porém não tenho certeza.
GOSTEI 1