i tried to make a image overlay.I will make that when i set the dic "overlay" to an image to apear a opacity above it.
I tried to make these code but it happens nothing
.gallery img{
width:100%;
height:auto;
display: block;
position: relative;
}
.overlay{
opacity:1;
width:100%;
height: auto;
overflow: auto;
position: absolute;
background-size:cover;
background:#000;
}
Thanks in advance !
You need to actually define the overlay. You need to apply a background-color or background-image to your .overlay.
Not sure how your HTML is structured but this should help you.
Based on your existing code..
HTML:
<div class="gallery">
<img src="./img/random.png" />
<div class="overlay"></div>
</div>
CSS:
.gallery img {
width:100%;
height:auto;
display: block;
position: relative;
}
.overlay {
width:100%;
height: 100%;
position: absolute;
top: 0;
background: rgba(0,0,0,0.4);
}
Note: The opacity needs to have a value less than 1 to make it somewhat transparent. Notice the 0.4 alpha/opacity setting in the CSS.
There are other ways to solution it, but without your code it's a little difficult to tailor it to your specific needs.
Related
Empty div like this :
<div class="section" id="s"> </div>
will be at the size of the screen.
But if I put another empty div inside, this section div height will be 0, or it will be in the height of the child's content.
<div class="section" id="s">
<div class="Back"> </div>
</div>
will make this section height to be 0, unless I put something inside Back which will make the section height= openBack's content.
I need to set the section size to be the screen size no matter what happens inside it, and I couldn't.
CSS :
html {
height: 100%;
}
body {
min-height: 100vh;
}
.section {
height: 100%;
width: 100%;
}
.Back {
background-image:url("/images/bg.png");
width: 100%;
height: 100%;
background-size: cover;
justify-content: center;
align-items: center;
}
How can you set the section size to stay screen size constant ?
NOTE: I was answering the original question
You might want to try this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
would be able to cover parent div.
Check the following fiddle or snippet:
.hidden{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(254,204,254,0.5);
align-items: center;
flex-direction: column;
}
div.openBack {
position:relative;
border:1px dashed red;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div.openBack img {
flex-shrink:0;
min-width:100%;
min-height:100%
}
<div class=openBack style="width:100px; height:200px">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
<div class="hidden"></div>
</div>
Try below css -
.openBack{ position:relative;}
.hidden{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:9999;
}
To use an image as a background to a section or div, you don't want to include that image as an element. It's pushing the other elements around it out of the way, this is why the next div is pushed below it. And it would be more complicated than necessary to try to get that to behave well by using absolute position.
I would suggest attaching the image as the background-image to either your section's class or id, and remove the <img> element from the html.
either:
.openBack {
background-image: url("/folder/file.png");
}
or
#one {
background-image: url("folder/file.png");
}
You'll want to look up the properties of CSS' background-image to get it to scale and fit the exact way you want.
And you can't use number values at the beginning of IDs.
Hope this helps!
Thanks for all the answers, I found out that the solution was pretty simple (stupid).
The inner div closing tag was wrong <div> instead of </div> which messed up the structure.
Wish I had a tool to find such a mistake.
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.
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
The last few days i tried to center a button over a fluid image. So far the position is fixed and static. The relevant HTML part looks like the following:
<ul class="moodlegrid sectionwrap">
<li>
<a class="ajax1" href="project1.html">
<img title="Project 1" src="img/projectblur.jpg" alt="Project 1" />
<img title="Project 1" src="img/project.jpg" alt="Project 1" />
<span class="openoverlay">Click</span>
</a>
</li>
</ul>
The CSS looks like that:
.moodlegrid{
li{
a{
position: relative;
display:block;
width: 100%;
img:nth-child(1){
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 37%;
left: 28%;
z-index:101;
#include border-radius(5px, 5px);
#include box-shadow(black 2px 2px 10px);
}
}
}
}
img{
width:100%;
max-width: 100%;
height:auto !important;
}
On mouseover a second image as well as a button should float centered on top of the first image. Problem is if the viewport changes the recent version doesn't work anymore and the button isn't centered. The following article on CSS-tricks had a promising solution:
Centering in the unknown
The demo worked fine:
Centering in the unknown demo
But it utilizes inline-block elements which makes it difficult to layer images and show on top of them a centered button in the end - the elements are displayed after each other when the display:inline-block property is set. There is also the problem that in contrast to my HTML the demo aligns a child object towards a parent.
Is there a way to apply the mentioned technique to my problem, or is there a maybe even better suiting approach? Best regards Ralf
If I understand you rightly, you're almost there I think.
<a> needs to be position: relative;
<span> needs to be position: absolute;
On the <span> if you set a specific width, and apply:
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px /* Half of the height */
margin-left: -50px; /* Half of the width */
http://codepen.io/anon/pen/xjcCf
Does that solve what you're trying to do?
Hi is this what look like
html
<div>
<h1><span>button</span></h1>
<img src="imageSample.jpg" alt="" />
</div>
css
div {
position:relative;
width:100%;
}
div img {
max-width:100%;
width:100%;
}
div h1 {
width:100px;
margin:auto;
}
div h1 span {
position:absolute;
z-index:999;
top:200px;
padding:5px;
background-color:#fff;
}
working demo
note: scroll fiddle so you can see the effect