Translucent round photo frame

Question

Continuing the theme of the translucent frame inside the picture - and if you need a frame with rounded corners, or completely round, i.e. the rectangular photo center is clean, the rest of the space is occupied by a translucent frame, the inner part is in the form of a circle?

Arthur 4.318 2 12 51 · Accepted Answer · 2018-05-26T11:08:48

It is possible and on without SVG ..

.img-block { display: block; width: 150px; height: 150px; position: relative; overflow: hidden; } .img-block img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .img-block .border { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 100px rgba(255, 0, 0, .5); position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

 <div class="img-block"> <img src="http://via.placeholder.com/150x150"> <div class="border"></div> </div>

Edits are made to improve questions and answers (i.e. for good purposes)

Arthur 4.318 2 12 51 · Answer 2 · 2018-05-26T10:56:45

I will do it later on SVG . mix-blend-mode poorly supported, but the effects are incredible:

 img { width: 480px; } .item { width: 480px; display: inline-block; position: relative; overflow: hidden; } .item:after { content: ""; display: block; width: inherit; height: 100%; background: rgba(255, 5, 255, .9); position: absolute; top: 0; left: 0; z-index: 1; mix-blend-mode: screen } .item:before { content: ""; display: block; width: 90%; height: 90%; background: rgba(250, 250, 250, 0.8); position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: color; }

 <div class="item"> <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> </div>

Second example:

 img { width: 480px; } .item { width: 480px; display: inline-block; position: relative; overflow: hidden; } .item:after { content: ""; display: block; width: inherit; height: 100%; background: rgba(255, 5, 255, .9); position: absolute; top: 0; left: 0; z-index: 1; mix-blend-mode: darken; } .item:before { content: ""; display: block; width: 90%; height: 90%; background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg); position: absolute; top: 50%; left: 50%; background-size: 100% 100%; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; }

 <div class="item"> <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> </div>

The third option:

 img { width: 480px; } .item { width: 480px; display: inline-block; position: relative; overflow: hidden; } .item:after { content: ""; display: block; width: inherit; height: 100%; background: rgba(255, 255, 255, .0); position: absolute; top: 0; left: 0; z-index: 1; mix-blend-mode: color-dodge; filter: grayscale(0); } .item:before { content: ""; display: block; width: 90%; height: 90%; background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg); position: absolute; top: 50%; left: 50%; background-size: 100% 100%; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; filter: grayscale(100); }

 <div class="item"> <img src="https://cdn.wallaps.com/wallpapers/150000/144504.jpg" alt=""> </div>

Arthur arthur 4.318 2 12 51 · Answer 3 · 2018-05-26T11:35:43

SVG An example using mask :

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <mask id="mask"> <rect width="100%" height="100%" fill="rgba(255,255,255,0.5)"/> <circle r="75" cx="75" cy="75"/> </mask> </defs> <image xlink:href="http://pravetsresidence.bg/en/wp-content/uploads/2017/07/town-house-exterior1-150x150.jpg"/> <rect width="150px" height="150px" fill="white" mask="url(#mask)"/> </svg>

in Fox there is nothing to be seen at all .... a white window

Answer 4 · 2018-05-26T16:38:46

You can also use an overlapping pseudo-element with an infinite shadow and border-radius :

 body { margin: 0; } div { background-image: url("https://i.stack.imgur.com/sPNoH.jpg"); background-size: cover; height: 100vh; /* Указать нужную высоту и ширину здесь */ position: relative; } div:after { content: ""; /* накрыть картинку полностью */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* бесконечная тень */ /* fallback для IE, так как IE не распознаёт единицы vmax */ box-shadow: 0 0 0 99999px rgba(255, 255, 255, .6); /* для остальных браузеров, которые понимают vmax */ box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .6); border-radius: 50%; }

 <div></div>

For some situations, a translucent radial gradient with a completely transparent area for the image ("cutout") is quite suitable for you:

 body { margin: 0; } div { background-image: radial-gradient(transparent 70%, rgba(255, 255, 255, 0.6) 0), url("https://i.stack.imgur.com/sPNoH.jpg"); background-size: cover; height: 100vh; /* Указать нужную высоту и ширину здесь */ }

 <div></div>

I use 0 as the second value ( rgba(255, 255, 255, 0.6) 0 ) in the radial gradient so as not to duplicate the first, since according to the specification the gradient step cannot be less than the previous value.

In the case of a color-stop before it.

@Arthur And where does the information that box-shadow affect performance come from?
I found it on one site =) - "Everything that involves making changes / calculations before rendering the page will be labor-intensive for the browser. For example, box-shadow, border-radius, transparency."
Suppose in comparison with your second variant :) (Or maybe I misunderstood these words)
@Arthur Well then your comment is suitable for all other answers too :) Then the ideal answer would be to edit the image in the editor and use it.
And the answer of Maxim Lensky, most likely, is generally a performance “killer”, since mixing of pictures in general seems to me to be an even more complicated operation.

Translucent round photo frame

4 answers 4

More articles: