Ir para conteúdo

Arquivado

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

kaayasinho

Div redonda com imagem e testo centralizado

Recommended Posts

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

É 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

 

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

×

Informação importante

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