i have a parent div with background image and another div inside it. i want background image of parent div only be seen in child div (like an open window).
.parent {
width:800px;
height:600px;
background-image: url("https://via.placeholder.com/150");
}
.child{
width:50%;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>
From what I understand, you want an image in backgound and you want to display it inside a child div.
To implement this, you can use WebKit's image masking.
.demo {
width: 200px;
height: 250px;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo:before {
content: "";
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg)
no-repeat;
opacity: 0.1;
transition: 0.7s;
}
.demo .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
.demo:hover:before {
opacity: 0.4;
}
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask">
</div>
More details here: https://css-tricks.com/clipping-masking-css/
Sadly, I can not comment yet. But as far as I understand your question, you want to mask the image of the parent by the child.
Maybe you can achieve this by using the information provided here:
https://css-tricks.com/clipping-masking-css/
But maybe, if you visualize your problem, there is no need for masking or cliping and can be solved way easier.
use
.parent {
width:800px;
height:600px;
background-image: URL(...);
background-size: 100% 100%;
}
Related
This question already has answers here:
Darken image overlay and add text over it in CSS
(4 answers)
Closed 4 years ago.
I have an image class named image and a div named semitransparent.
i want to create a semitransparent background color in css, so that the image in image class can be seen through it
How to create this semi transparent color in css?
.semitransparent{
width:300px;
height:300px;
}
.image{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
<div class="semitransparent">
<div class="image">
</div>
</div
You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
Have you heard of css-filter:blur?
Just have a class
.blur{ filter: blur(4px) }
and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/
Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.
.overlay{ position: absolute; width: 300; height: 300 }
.image{ position: relative; }
Then place the overlay inside the image DIV.
<div class="image"><div class="overlay"></div><img src="…" …></div>
It can be done using following code -
<div class="image">
<div class="semitransparent">
</div>
</div>
.semitransparent {
background: black;
opacity: 0.5;
position: absolute;
top:0; left:0; right:0; bottom:0;
}
.image {
background-image:url(https://picsum.photos/300/300/?random);
width:300px;
height:300px;
position: relative;
}
Fiddle link - https://jsfiddle.net/Lvhwmy31/
The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.
It's sort of a css ninja style anyway :)
You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<style>
.child1{
background-image:url(https://picsum.photos/200/300/?random);
width:300px;
height:300px;
}
.child2{
background-color: rgba(138, 43, 226, 0.6);
width:300px;
height:300px;
position: absolute;
top: 0px;
}
.parent {
position: relative;
height: 2000px;
}
</style>
.full {
background: url(https://picsum.photos/200/300/?random) 0 0 no-repeat;
min-height: 300px;
}
.full {
background-size: cover;
position: relative;
}
.full:hover .overlay-effect {
opacity: 1;
cursor: pointer;
}
.overlay-effect {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(259, 67, 95, 0.7);
overflow:hidden;
}
.full a
{
color: #fff;
}
.full h3 {
padding: 15px 30px;
}
#media screen and (max-width: 368px) {
.full{margin-bottom: 10px;}
}
<div class="full">
</div>
</div
check this code, Change "rgba" color while you want.
<div class="semitransparent">
<div class="image">
</div>
</div
.semitransparent{
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
.image{
background-image:url(https://picsum.photos/300/300/?image=206);
width:300px;
height:300px;
}
I want to add an transparent layer over my img on a card when I hover over it, I have done that part but I want it to be cut to the img and not cover the footer on the card. If that makes sence?
this is the card with Hover. As u can see on the card, the img just covers like 90% of the card, I want the hover overlay to do the same
Card when not hover IMG
Card when hover IMG
.card {
position:relative;
width: 350px;
height: 335px;
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
border-radius: 5px;
margin: 30px;
float: left;
}
#card_oslo{
background-image: url(img/oslo.jpg);
}
#card_oslo:hover{
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);
transition: .5s;
}
You should use a pseudo-element for this. Use :after or :before and set it as full size also set the parent with position:relative; then change the opacity of the pseudo element on hover.
Working Demo.
.box {
position:relative;
}
.box:after {
content:"";
/* Set the element as full-size */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
/* Set bg and hide the element + animation */
background-color:#000;
opacity:0;
transition: all 0.5s ease 0s;
}
.box:hover:after {
/* Show the overlay on hover */
opacity:0.5;
}
/* For the demo */
.box {
width:200px;
height:200px;
background-color:red;
}
<div class="box"></div>
You can set the overlay to
position: absolute;
top: 0;
bottom: XXpx;
left: 0;
right: 0;
where XX is the footer height, then it will cover the whole card and leave the bottom x pixels free. You can also use % values instead of px.
If you want the overlay to contain text you need to put it into an extra div that you can then use as overlay.
I made a simplified version here https://jsfiddle.net/0L9fL1pj/
Been looking for a similar solution and since this thread never got a proper answer (neither proposed answer got me where I wanted and I doubt) but I got some important clues here and I thought I'd provide my current solution so anyone who has a similar problem can benefit.
I made a simple demo here: https://jsfiddle.net/Tdesign/2ynuajk0/14/
HTML:
<div id="imgBox2" class="shade">
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" width="350" height="335" loading="lazy" >
</div>
CSS:
#imgBox2 {
position: relative;
width: 500px;
}
.shade:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500px;
background-color: rgba(0,0,0,0.5);
}
I'm trying to have it so that when I hover on an <img> tag, a div will appear over it. I want it to be a white overlay with text inside of it.
I cannot make the image a background-image, as much as I would like to. My code uses width:percent/max-width:pixels and height:auto/max-height:pixels, so without the img there, nothing would show up. And to my knowledge, there is no solution to that issue.
I attempted to give the image a unique id and apply a id:hover .class to have the div appear, but it didn't respond to any coding I gave it, let alone work right. I then tried putting the id on a div of its own over putting it on the picture with still no yield.
I also tried to make a div with the image as a background pic and made the hover as desired. I tried to make the div not implode by putting in another div that has the image constraints, but because of the height:auto, it didn't work.
I refuse to set height/width as pixels, as it would mess up the rest of my coding and one of the major reasons I'm coding what I am. So, if it's not possible because of this, that's fine; Just tell me.
My CSS is as follows:
#logo {
text-align: center;
width:100%;
max-width:769px;
height:auto;
overflow:hidden;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
#bannerpic .logobody {
display:none;
}
#bannerpic:hover .logobody {
display:inline;
background-color:rgba(255,255,255,0.5);
width:100%;
height:100%;
}
My HTML is this:
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
<div class="logobody">text</div>
</img>
</div>
I don't know if you need to be able to click the image, but you can overlay text with absolute positioning.
#logo {
text-align: center;
height: auto;
overflow: hidden;
position: relative;
max-width: 469px;
}
#bannerpic {
width: 100%;
height: auto;
}
.logobody {
position: absolute;
background-color: pink;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.logobody:hover {
opacity: 1;
}
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
<div class="logobody">text</div>
</div>
How about this:
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.logobody {
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.75);
visibility: hidden;
height: 100%;
width: 100%;
}
#logo:hover .logobody{
visibility: visible;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
Here's a JSFiddle link for it:
https://jsfiddle.net/zVBDc/790/embedded/result/
Note: My example is using 0.75 alpha for the background. 0.5 seemed too low. Set it to whatever you prefer, though.
Here's a simple example:
<div class = "has-scrollbar">
<div class = "long"></div>
<div class = "overlay"></div>
</div>
.has-scrollbar {
width: 200px;
height: 100px;
overflow-y: scroll;
position: relative;
}
.long {
height: 200px;
width: 50px;
background: blue;
}
.overlay {
width: 100%;
height: 100%;
background: red;
opacity: 0.5;
position: absolute;
top: 0;
}
JsFiddle
The red overlay should completely fill the parent container. The height of .long is not known in advance. The .has-scrollbar div should still be scrollable (and not covered).
Any solution using position: fixed on .overlay will not likely work. The real-world scenario is far more complex. Consider the position of .has-scrollbar within the body to also not be known in advance.
So you don't know about long, but seems like you do control has-scrollbar, so you can make overlay fixed and position it in the same place as has-scrollbar:
.overlay {
height: 100px;
margin-top: 8px; /* just to compensate for body margin in the example */
pointer-events: none; /* mouse events will pass through */
position: fixed;
width: 200px;
}
Updated JSFiddle.
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}