Div redonda com imagem e testo centralizado
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
/applications/core/interface/imageproxy/imageproxy.php?img=http://1.bp.blogspot.com/-pw2YyMxvUjQ/VNT13D9Sc5I/AAAAAAAAAe0/Q1t84nKRWKk/s1600/Captura%2Bde%2BTela%2B2015-02-06%2B%25C3%25A0s%2B3.07.49%2BPM.png&key=64e2a96420229dad720997085393a071ff684085754a81e0d2078ba77cd3ec02" alt="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>Discussão (3)
Carregando comentários...