I need to make an effect using HTML and CSS only with a circle image surrounding another image.
Here is what I'm trying to achieve:
On this example, the circle is an SVG image. The center image is a PNG with a border-radius.
I think the best way would be to use the top half of the main image as a mask for the circle image. I looked for the mask and the clip-path properties, but without success.
Here is my code so far:
<div class="main-image">
<div class="image-container">
<img src="uploads/main_image.png">
</div>
<div class="outline-circle"></div>
</div>
.image-container {
position: relative;
border-radius: 9999px;
overflow: hidden;
img {
width: 30vw;
max-width: 500px;
}
}
.outline-circle {
position: absolute;
top: 0;
left: 0;
background-image: url(../img/circle_1.svg);
height: 100%;
width: 600px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
But with this code, the circle is simply positioned on top of the image:
Thanks for your help,
You can try like below:
.box {
display: inline-block;
position: relative;
margin: 10px 50px;
transform-style: preserve-3d; /* this is important */
}
.box:before {
content: "";
position: absolute;
inset: auto -40px;
aspect-ratio: 1;
border-radius: 50%;
border: 5px solid;
border-color: blue green red blue;
transform: rotate(16deg) rotateX(41deg); /* play with this */
}
img {
border-radius: 999px;
}
<div class="box">
<img src="https://picsum.photos/id/1069/200/300">
</div>
Related
This question already has answers here:
Hole in overlay with CSS
(6 answers)
Closed 10 months ago.
My goal is to achieve something similar to .
This example image uses 4 semi-transparent black squares, on the right, left, top and bottom to simulate the effect I'm after
Using code that looks somewhat like this:
.wrapper {
position: relative;
width: 400px;
height: 200px;
}
.overlay {
position: absolute;
background-color: #0005;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.transparent-box {
background-color: #fff0;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<img src="https://picsum.photos/400/200" alt="">
<div class="overlay">
<div class="transparent-box"></div>
</div>
</div>
</body>
</html>
I would like to be able to get this effect with while using oneelement for the background and one element making the "window" so that for example adding rounded courners and similar styling could be done easier.
I've tried playing around with blend modes, but I'm not sure if it doesn't support that or if I've just set it up wrong.
A nice trick to get the same effect, is to use a box-shadow on the overlay:
.overlay {
box-shadow: 0px 0px 1px 100vmax rgba(0,0,0,0.5);
}
In this case, 100vmax fills up the whole page.
you could use two images with the background fixed property to create a similar effect.
Check this fiddle link jsfiddle
$(".transparent-box").draggable();
.overlay {
height: 300px;
width: 300px;
background-image: linear-gradient(0deg, #464646fc, #383333ab), url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.transparent-box {
height: 30%;
width: 30%;
background-image: url('https://via.placeholder.com/300/0000FF/808080%20?Text=Digital.com');
background-repeat: no-repeat;
background-attachment: fixed;
position: absolute;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="overlay">
<div class="transparent-box"></div>
</div>
</body>
</html>
if you change the opacity of your transparent-box (div) and set the
color to white, you will get the translucent effect that you showed
in your example link.
//css of transparent-box linked below
.transparent-box {
background-color: white;
opacity: 0.6;
position: left;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
}
if you want a shadow around and in the middle the normal picture you
need to use the shadow box:
.transparent-box {
opacity: 0.9;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
box-shadow: 0 0 0 100pc rgba(0, 0, 0, .8);
}
Everything was right, except for the colors. I just changed the background and that's it.
I hope that's what you wanted
.wrapper {
position: relative;
width: 400px;
height: 200px;
}
.overlay {
background-color: #0000003b;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.transparent-box {
background-color: #ffffff78;
position: absolute;
top: 4rem;
left: 50px;
width: 100px;
height: 80px;
}
<div class="wrapper">
<img src="https://picsum.photos/400/200" alt="">
<div class="overlay">
<div class="transparent-box"></div>
</div>
</div>
I have a background image, but I need to place a div that its bottom edge should go below the image. What's the easiest way to do this?
Please see the attached image. The white part is the background image and the blue part is my div over the background.
You can create a relative positioned wrapper and then set absolute positioning with bottom: -10%; or bottom: -20px; for a div over a div with image:
.image-with-block-wrapper {
position: relative;
}
.image {
height: 200px;
border: 1px solid #111;
background: url('https://www.gravatar.com/avatar/f42a832da648291bf80206eda08e3332?s=328&d=identicon&r=PG&f=1');
}
.div-over-bg {
border: 1px solid #111;
position: absolute;
height: 50px;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
background: green;
width: 100px;
margin: 0 auto;
}
<html>
<head></head>
<body>
<div class='image-with-block-wrapper'>
<div class='image'></div>
<div class='div-over-bg'></div>
</div>
</body>
</html>
Edit:
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
So I've created a container with a background image and placed a div inside.
I've given the .block margin: auto; to center it and added position: relative; so I can move it, because it has position: relative; I can add top: 100px; to move it down from the top by 100px
.container {
background-image: url('https://via.placeholder.com/150');
width: 100%;
background-position: cover;
height: 300px;
position: relative;
}
.container .block {
height: 300px;
background-color: blue;
width: 500px;
position: relative;
margin: auto;
top: 100px;
}
<div class="container">
<div class="block">
</div>
</div>
Extra info by #I_Can_Help
In the case of using percents for bottom it will be related with the wrapper height, but you can use bottom: 0;
and transform: translate(-50%, 15%); in order to set the upper block vertical position as relative to the block itself.
Is there any possible way to make a two-sided inner shadow by shadow-box in css like the image below?
You can use a background image to fill the div:
#custom{
min-width: 200px;
min-height:200px;
width : 100%;
background-image : url("http://i.stack.imgur.com/y6HMs.png");
background-repeat : no-repeat;
background-size: contain;
}
<div id="custom">
</div>
And make sure to give it background-size: contain; so the image can fit all the div.
EDIT:
This is a snippet using a border in the div, so you can see that the image is filling all the space.
#custom {
min-width: 200px;
min-height: 200px;
width: 100%;
background-image: url("http://i.stack.imgur.com/y6HMs.png");
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
<div id="custom">
</div>
You can use pseudo elements for both shadows:
div {
box-shadow: inset 0 0 2em -.5em gray;
line-height: 3em;
text-align: center;
position: relative;
overflow: hidden;
}
div:before,
div:after {
content: '';
display: inline-block;
width: 40%;
height: 100%;
position: absolute;
left: 5%;
top: -100%;
border-radius: 50%;
box-shadow: 0 0 2em #aaa;
}
div:after {
left: auto;
right: 5%;
}
div[contenteditable] {
margin-top: 3em;
display: inline-block;
outline: none;
}
<div>hello world</div>
<div contenteditable>TYPE HERE...and watch the shadows</div>
These shadows have a responsive behavior. Their size expands when the div width expands.
I'm trying to achieve the following - an element with a background image, a pattern over the top of the background image, and a box on top of both that "knocks-out" the pattern but still shows the background image.
Here's an image showing the desired effect:
As you can see the pattern does not show under the top box, but you can still see the background image.
Here's the markup:
<div class="bck">
<div class="bck2"></div>
</div>
<div class="box">
<p>Text goes here</p>
</div>
And the CSS:
.bck {
position: relative;
height: 800px;
width: 100%;
background:url(http://upload.wikimedia.org/wikipedia/commons/7/79/Preller_Norwegian_landscape.jpg)
}
.bck2 {
position: absolute;
height: 800px;
width: 100%;
top: 0;
left:0;
background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
border: 10px solid white;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
I've tried a few things with clip-path, z-index and webkit-background-clip, but can't seem to get the combo right.
Any pointers would be very appreciated. Thanks.
Oh and here's the pen: http://codepen.io/juxprose/pen/yyKEqQ
I think the idea here is that the image must be large enough to cover the webpage or at least the parent div..
Then you can apply the image to the background of both the container and the 'inner'div.
The overlay can be achieved by way of a pseudo-element rather than a separate div.
Revised structure -
.bck {
position: relative;
height: 800px;
width: 100%;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.bck::before {
content:'';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left:0;
background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
border: 10px solid white;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 30px;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-position: center center;
}
<div class="bck">
<div class="box">
<p>Text goes here</p>
</div>
</div>
I'm trying to position an image inside its container. Because the container has overflow:hidden, it is hiding half of the image — I would like to add bottom: 50%, so it shows the center of the image.
At the moment, if I do so, you see a gap between the image and its parent. Would anyone know how to position this, so you get to see the center of the image?
http://jsfiddle.net/tmyie/RGfdh/1/
<div class="img-ctnr-med">
<a href="#">
<img src="http://placehold.it/200x200" alt=""/>
</a>
</div>
img {
background-color:grey;
display: block;
position: absolute;
}
.img-ctnr-med {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}
It should be bottom: -50% instead, so it shifts the image 50% of the height of the container down towards the bottom edge of the container rather than up away from it.
When specifying values for top, right, bottom and left, positive values shift an element away from the respective side and negative values shift an element towards the respective side.
I think the best way to do this is to include the image as background image. It is cleaner then moving around elements. See this Fiddle as example.
html:
<div class="img-ctnr-med">
link text
</div>
css:
img {
background-color:grey;
display: block;
position: absolute;
bottom: 30px;
}
.img-ctnr-med a {
width: 100px;
height: 100px;
color: transparent;
text-indent: -9999px;
display: block;
border: 1px solid blue;
position: relative;
overflow: hidden;
background-image: ;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
Modify
img {
background-color:grey;
display: block;
position: absolute;
}
To
img {
background-color:grey;
display: block;
position: absolute;
left: -50%;
top:-50%;
}