This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
I'm working on a project in ReactJS and I need to integrate a video in the background of a div. Now I have a div on top of the background which shows the video as is, but the rest of the background needs to be blurred, kinda like this. Is there any way I can do this using CSS?
Yes, use the filter CSS property on an element that will absolutely fill a parent element to act as a backdrop.
html,
body {
margin: 0;
padding: 0;
}
.filter-demo__main {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.filter-demo__bg {
/* You'll have to keep this and the img src in sync*/
background-image: url("https://placeimg.com/640/480/nature");
background-size: cover;
}
.filter-demo__bg {
position: absolute;
z-index: 1;
/*
* The negative values of top, right, bottom, left are to
* account for the "bleeding" effect of the underlying element's
* color showing through. Set them to 0 to see what I mean.
* Their values should about the negative value whatever you feed
* the blur().
*/
filter: blur(10px);
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.filter-demo__actual {
z-index: 2;
border: 10px solid white;
max-height: 50%;
max-width: 50%;
}
<div class="filter-demo__main">
<div class="filter-demo__bg"></div>
<!-- Make sure the img src is the same as the background image for the filter-demo__bg -->
<img class="filter-demo__actual" src="https://placeimg.com/640/480/nature" alt="A placeholder image of nature" />
</div>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I am not asking how to round corners of image. In given case when I mouse-hover on the image you can see that the image is not covering whole div as well as the lower corners are not rounded, but if I add display: block to the image, it covers the div and the lower corners seems to be rounded, I am unable to understand why this is happening?
See images for before and after display:block.
HTML:
<div class="row">
<div class="campus-col">
<img src="./images/london.png" alt="london campus" />
<div class="layer">
<h3>LONDON</h3>
</div>
</div>
CSS:
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.campus-col {
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img {
width: 100%;
display: block; /**** THIS PROPERTY ROUNDS THE LOWER CORNER *****/
}
.layer {
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover {
background: rgba(226, 0, 0, 0.7);
}
BEFORE display:block on mouse-hover the image is-
AFTER display:block on mouse-hover the image is -
You can just write the following code instead of display: block;
opacity:1;
This will also work the same as display block. Just try this code and check wether again it is rounding the corners?
This question already has answers here:
Can I create a div with a Curved bottom?
(5 answers)
Closed 1 year ago.
I am trying to make a half circle on the screen over which I can put buttons and other things just like AdminBro top blue color circle but a little bit smaller. I did it like this:
.navbar {
position: relative;
overflow: hidden;
}
.eclipse {
position: absolute;
width: 200vw;
height: 200vw;
left: -50vw;
top: -180vw;
background-color: #41B3A3;
border-radius: 100vw;
}
<div id="root">
<div class="navbar">
<div class="eclipse"></div>
</div>
</div>
As you can see this is a react application. The thing is I am not getting the desired result please tell me why?
There's an easier way to this. You can simply use clip-path property of CSS.
Create a div element with a background color below body tag and give it an absolute position and full width and height. Then use clip-path to create a create clipping path.
HTML
<div class="ellipse"></div>
CSS
.div {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: cyan;
clip-path: ellipse(80% 50% at 50% 5%);
}
You can play around with the values. Also this clip-path generator is a useful tool.
I am not quite sure if I understand your question, but if you just want to make a half circle, try this:
.half-circle {
width: 200px;
height: 100px; /* needs to be half of the width */
border: 10px solid black;
border-bottom: none;
background: green;
border-radius: 110px 110px 0 0;
}
Note, how the border-radius is 100px (height) + border-width (10px). If you don't need a border the border-radius of the top two corners is just equal to your height.
This question already has answers here:
Why is my element not sticking to the left when using position sticky in css?
(2 answers)
Why isn't position:sticky with left:0 working inside a scrollable container?
(1 answer)
Closed 3 years ago.
I'm trying to make an interface where two parts overlap, and one can scroll through the first part horizontally and the second part vertically. I quickly discovered the css sticky position.
Here is code demonstrating the issue I encountered using position: sticky; :
body {
margin: 0;
}
#d1 {
background: red;
position: sticky;
top: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
left: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
(doesn't work in my browser, here is a jsfiddle https://jsfiddle.net/2bovgy84/1/ )
If you scroll down red div stays on top (what I expect), but if you scroll right blue div gets "stuck" half-way through (but I expect it to behave like the red one does)
I do not understand this behavior, at all.
body needs to be allowed to grow wider than HTML/window's width so it doesn't drag the blue element along with it (backgrounds on html/body shows what happens : https://jsfiddle.net/Lq473pue/1/ ).
you can use for that:
display:inline-block;
display:table;
float:left;
jsfiddle updated : https://jsfiddle.net/Lq473pue/
min-width:100%; can also be handy for body
The body needs the width or you need elements that are not sticky to create that width. Otherwise your body will be the width of the viewport.
https://jsfiddle.net/y9r74c0x/20/
body {
margin: 0;
width: 2000px;
}
#d1 {
background: red;
position: sticky;
bottom: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
right: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Can I set an opacity only to the background image of a div?
(8 answers)
Set opacity of background image without affecting child elements
(15 answers)
Closed 4 years ago.
I am trying to change the opacity of my background image to make it match the website. The problem is that the opacity: 0.5; change everything within the element. So not only the background image change but also the text and every other element in the section. How am i supposed to change only the color of the image? Here is my code:
section {
background-image: url(../IMG/Photo_NR1.jpg);
padding: 15px;
width: 100%;
height: 700px;
}
I have done some research but i couldn't find anything. I tried to have all my elements out of the <section> tag but then i was forced to change the position of the elements again. Thanks for your time :)
You could also do this by a pseudo element. Something like this:
section {
position: relative;
padding: 15px;
width: 100%;
height: 700px;
}
section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: .5;
background-image: url(../IMG/Photo_NR1.jpg);
}
So you do not need an image tag and you separating the design from content.
Try to seperate the image.
Html:
<div class="my-container">
<img src="your/image">
</div>
Css:
.my-container {
position: relative;
overflow: hidden;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.5;
}
Source:
https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
I have a problem hiding the <img src="/"> and overlay the background image on a media 480px version.
I tried to use the code based on CSS background image on top of <img> and it doesn't work for me.
JDFIDDLE
HTML
<div class="j_img-overlay">
<img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>
CSS
.j_img-overlay {
width: 100px;
height: 100px;
}
.j_img-overlay img {
background-size: auto;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
position: relative;
box-sizing: border-box;
width: 100px;
max-width: 100px;
z-index: 100;
}
First of all <img/> element should not display background-image. Additionally, only background property let you adjust all of the available background style options at once so, unfortunately background-image can takes only image urls and not repeating value.
Find here more about Background Image and Background css properties.
To make the overlay works properly you can using pseudo element (after, before) with absolute positioning to fill the container of the image element. Relative position is required for the container to avoid leakage of the pseudo element (with the absolute position that we defined).
Find here more about Pseudo Elements - CSS.
Working example:
.j_img-overlay {
position: relative;
width: 100px;
}
.j_img-overlay::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
background-size: cover;
}
.j_img-overlay img {
display: block;
width: 100%;
}
<div class="j_img-overlay">
<img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>