Reputation: 6191
I'd like to be able to circle elements on a web page using only CSS. I have some code that is almost working - it produces a circle around the element but
The following code is what I currently have
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>
</head>
<body>
<style>
div.ccc {
display: run-in;
position: relative;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
</style>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</body>
which produces the following. Note that the circles are not centered on the images and the width's are off.
Is it possible to fix that using CSS only?
Upvotes: 0
Views: 673
Reputation: 3933
Set the div to display:inline-block and it will work.
Divs are block-level elements by default, which mean they'll take 100% the width.
edit: problem is that you're using % to size the image, which depends on the parent width... and we are trying to get the parent sized accordingly to the child... So that won't work.
Closest you can get, as far as I can tell, is avoid sizing your image on %, and display the div as inline-block
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.small{
width:200px;
}
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
if you really need to size it as %, you'll need to add another container and size that one instead
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.img-container{
display:inline-block;
}
.img-container img{width:100%}
.small{
width:200px;
}
<div class="ccc">
<div class="img-container small">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
<div class="ccc">
<div class="img-container">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
Upvotes: 1
Reputation: 54
The width of a div
is 100% by default, that's the reason all your circles are massive and not centred on the child.
Why not just put the red circle border on the img
tag instead of the div
? I.e., put the circle on the child element in the first place.
Another option would be to get the div
to match size of the content by setting display: inline-block
on the .ccc
class.
If neither of those is an option, I'm pretty sure there is no pure CSS way of doing it.
Upvotes: 0