Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>É 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>"*>
É isso que deseja?
http://dabblet.com/gist/2818749%22%20title=%22Demo%22
vlw
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
É isso que deseja?
http://dabblet.com/gist/2818749%22%20title=%22Demo%22
vlw