CODEWITHSUNDEEP
htmlcss
Lucky Ali
Lucky Ali

Reputation: 111

Adding a circle around a rounded image

I created a round-image using following HTML

<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>

and CSS

.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}

I tried adding a new circle around the rounded image, failed eventually. How am I supposed to do this? Should I create a new div and add this rounded image inside it and style that div to make it round? I tried to achieve circled image in this google link https://www.gmail.com/intl/en/mail/help/about.html which is placed right below the slider. Here is my fiddle of what I've gotten so far http://jsfiddle.net/adityasingh773/rzsmpmc9/

Upvotes: 1

Views: 587

Answers (4)

rockStar
rockStar

Reputation: 1296

You can achieve same style as the link you have provided if u'll use an image, which is the most plausible way, but if you play with box-shadow u will most likely get the same thing.

box-shadow:2px 2px 4px green, -2px -2px 4px red;

check this.

Upvotes: 0

sinisake
sinisake

Reputation: 11338

This is not so elegant solution, because it requires extra-html, but looks pretty fine, imho: (didn't experiment with pseudo-elements, maybe similar result can be achieved).

<div class="thumb-wrapper">
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div> 
    </div>

CSS:

.thumb-wrapper {
  width: 170px;
    height: 170px;
    overflow: hidden;
    border-radius: 50%; 
    background-color:#fefefe;
    position:relative;
    box-sizing:border-box;
    border:1px solid #dedede;
   -webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
}
.thumb{
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
    position:absolute;
    left:8px;
    top:9px;
     box-sizing:border-box;

}

DEMO: http://jsfiddle.net/rzsmpmc9/5/

Upvotes: 4

cvsguimaraes
cvsguimaraes

Reputation: 13260

Tried adding an border?

<div>
    <img class="thumb" src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>

.thumb{
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  border:2px solid white;
  box-shadow:0 0 0.5em white;
}

Optionally you may use an box shadow to produce a solid shadow, since the shadow doesn't compute within the element positioning and size, avoiding interference in your current layout.

Upvotes: 2

indubitablee
indubitablee

Reputation: 8216

you can simply add a border to your existing css

border: 3px blue solid;

http://jsfiddle.net/rzsmpmc9/2/

Upvotes: 1

Related Questions