Ir para conteúdo

POWERED BY:

Arquivado

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

kaayasinho

Div redonda com imagem e testo centralizado

Por , em Desenvolvimento frontend

Recommended Posts

kaayasinho    0

kaayasinho
Postado

Boa tarde,

Estou com um grande problema,, nao estou conseguindo reproduzir isso em html..

como eu faria essa imagem ficar exatamente como esta sö que no codigo?

meu maior problema é centralizar a imagem dentro da div redonda, e colocar o texto centralizado dentro da div.

todo codigo que faço acaba quebrando..

 

alguem poderia me ajudar? como posso resolver esse problema?

 

referencia

OBS: A IMAGEM DE FUNDO ESTA COM MENOS OPACIDADE POR CONTA DE QUANDO O MOUSE PASSAR POR CIMA, A OPACIDADE VOLTA AO NORMAL

Captura%2Bde%2BTela%2B2015-02-06%2B%C3%A

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
	.circulo{
		width:130px;
		height:130px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		
		}
		img{
			z-index:1;
			width:255px;
			opacity:0.5; 
			
			}

</style>

</head>

<body>
  <div class="circulo">
  		<img src="http://1.bp.blogspot.com/-a632cWhzU7E/VNT0MncCZRI/AAAAAAAAAeo/a6yrdo08akQ/s1600/02.jpg">

  		<div class="dentro">
        	<p>Um testo vai aqui para descrever a imagem</p>
        </div>

  </div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

WictorP    9

WictorP
Postado

É só usar uma div dentro da div.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
	.circulo{
		width:130px;
		height:130px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		position:relative;
		}
		.img{
			z-index:1;
			width:130px;
                        height:130px
                        background-position:center;
			opacity:0.5;
		}

</style>

</head>

<body>
  <div class="circulo">
  		<div class="img" style="background-image:url('http://1.bp.blogspot.com/-a632cWhzU7E/VNT0MncCZRI/AAAAAAAAAeo/a6yrdo08akQ/s1600/02.jpg');"></div>

  		<div class="dentro">
        	<p>Um testo vai aqui para descrever a imagem</p>
        </div>

  </div>

</body>
</html>
Obs: "Testo" é com X.. ^^ Uma boa escrita é essencial para atrair visitantes.

"<p>Um testo vai aqui para descrever a imagem</p>"

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

 

a ideia e essa mesma... mas esse codigo por causa do position:absolute, atrapalha o layout em geral

existe outra forma de fazer? e colocar um texto centralizado no meio do circulo?

É só usar uma div dentro da div.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>The One Testes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
	.circulo{
		width:130px;
		height:130px;
		border-radius:50%;
		border:3px solid #000;
		z-index:5;
		background:#000;
		position:relative;
		}
		.img{
			z-index:1;
			width:130px;
                        height:130px
                        background-position:center;
			opacity:0.5;
		}

</style>

</head>

<body>
  <div class="circulo">
  		<div class="img" style="background-image:url('http://1.bp.blogspot.com/-a632cWhzU7E/VNT0MncCZRI/AAAAAAAAAeo/a6yrdo08akQ/s1600/02.jpg');"></div>

  		<div class="dentro">
        	<p>Um testo vai aqui para descrever a imagem</p>
        </div>

  </div>

</body>
</html>
Obs: "Testo" é com X.. ^^ Uma boa escrita é essencial para atrair visitantes.

"<p>Um testo vai aqui para descrever a imagem</p>"

 

esse jeito foi perfeitamente funcional hahaha

 

Obrigado... so vou precisar agora centralizar o testo..!

 

Brincadera.. o TEXTO, eu tenho mania de escrever essa palavra errada

Obrigado pela ajuda e a correção

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