3

I have just started working with CSS.

I have a rectangle image. I want to put it on a background and view it as a circle with light transparency as the example.

enter image description here

Maytham Fahmi
  • 31,138
  • 14
  • 118
  • 137
  • Please include the code you have in the question. – web-tiki Nov 17 '14 at 17:18
  • Searched "css transparent circle" and got tons of results, the first being [this very similar question](http://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle-using-css-only). Any help to you? – Calvin Scherle Nov 17 '14 at 17:19
  • Cant you just position the rectangle image over the background image how you want, then use border-radius, and z-index if needed, to accomplish what you'd like? – frajk Nov 17 '14 at 17:23
  • @CalvinScherle I saw that solution but this is not the solution for my question. – Maytham Fahmi Nov 17 '14 at 17:46
  • I have, the problem any thing you put around the rectangle image, if it is transparent the you won't see the circle, I will retry. and put more info soon – Maytham Fahmi Nov 17 '14 at 17:48

3 Answers3

1

here's a rough demo of how to do it: http://jsfiddle.net/jalbertbowdenii/vfac6L4x/
using your pix, just simply add the correct url for the img element and change the backgroudn color of the mask container div as well as the border color of the image.
if you want more info, search for css masks
because stackoverflow requires this: 


.mask{background-color:#000}
img{display:block; margin-left:auto; margin-right:auto;
border-radius:25px; border:solid #000}

and the markup 


<div class="mask">
  <img src="https://photos-6.dropbox.com/t/1/AAASULb1odiWJlk3dyEG-rF4B0baCCQ2D9aoTqXZiYZW6w/12/107220852/jpeg/1024x768/3/1416250800/0/2/trans-cirecle.jpg/VFul9uUE7QKOIrYKVNy58z9JzoOHj9UK3AGRUsSFbgY" />
</div>

albert
  • 8,112
  • 3
  • 47
  • 63
  • I'm guessing OP only want the result of Pic #3. – dippas Nov 17 '14 at 17:52
  • i guessed that as well, but the pix wasn't provided by itself, and while i could have used clip-path to show it perfect, thats not the approach OP was asking for. my demo is essentially what yours is just using the given pix – albert Nov 17 '14 at 17:55
  • 1
    @albert I voted up, it was long time you answer this question but that time I was new user and was not able to vote, thx. I have also improved my skills since. – Maytham Fahmi Nov 09 '15 at 23:37
1

Is this what you looking for?

When you apply: border-radius: 50%; to your img it gets a circle as you you want.

.bg {
  background-color: mediumaquamarine;
  width: 500px;
  height: 500px;
  margin: auto
}
img {
  border-radius: 50%;
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 50%;
  /* Firefox 1-3.6 */
  -moz-border-radius: 50%;
  border: 1px solid red;
  margin-left: 25%;
  margin-top: 25%;
  z-index: 1;
  position: relative;
  opacity: 0.8
}
<div class="bg">
  <img src="http://placehold.it/250x250&text=Image" />
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
0

Add border-radius:50% to the image; img{}

Change values of border-radius to various pixel values and percentage values to get more effects.

dippas
  • 58,591
  • 15
  • 114
  • 126
vishnu
  • 624
  • 1
  • 6
  • 21