I have some trouble with CSS.
I have code (example):
<div class="background" style="background: url(sample.jpg) no-repeat;">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
What I want to do is, that when hovering on this background image - it should get opacity to lets say 0.3, but how to make it, that inside items would stay the same opacity 1?
Here's the best trick in the book. https://jsfiddle.net/xbxvr8as/
If you have trouble with CSS then this might well bend your brain but the jsfiddle is as pared down as you can get it. Play with it by removing single styles to see what happens.
The crux is to relative:position your element. Then you can add a "pretend" extra div-like thing using the :after pseudo-element. You give this pseudo-element a bunch of properties - the most important probably being position:absolute which allows it to sit straight underneath the text.
HTML
<div id="a">
some stuff in here .....
</div>
CSS
#a{position:relative}
#a:after{
content:" ";
position:absolute;
display:block;
top:0;left:0;right:0;bottom:0;
background-color:#f00;
z-index:-1;
opacity:0.2;
}
You could use a pseudo element.
<div class="background">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
.background {
position: relative;
background-color: yellow; /* added for illustrative purposes */
min-height: 150px; /* added for illustrative purposes */
}
.background:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.3;
background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg');
background-repeat: no-repeat;
}
jsFiddle: http://jsfiddle.net/3kbf5p5x/
You could put the background on an absolutely-positioned element within the outer element, and then control its opacity independently:
<div style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(sample.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
Note that to do that, we have to make its container positioned via position: relative.
Live Example:
body, html {
height: 100%;
}
.outer {
width: 100%;
height: 100%;
}
.background {
opacity: 0.5;
}
<div class="outer" style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(http://onlyfreewallpaper.com/download/sea-coast-night-sky-stars-milky-way-1024x768.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
Related
I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>
So I have two divs which are overlapping, set by my CSS as shown below.
HTML:
<body onLoad="present();">
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>
</body>
CSS:
.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}
.wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}
I would like, when the body has loaded, a function to load which does the following: Fades in the image found in the div .pre-wrap, after displaying it for a few seconds, it will fade the image out and the div .pre-wrap will have it's visibility set to hidden. The second div .wrap will then fade in all of its contents.
I tried some simple JS but didn't achieve what I was after.
This question I would say is unique because it has overlapping divs which need visibilities being changed. Please note the overlapping already works, it's just the javascript fading that needs doing.
I tried the following JS which is very simple and works on other projects I've done however it doesn't on this one.
function present() {
$("#logo").fadeIn(3000);
}
Here is my code. I removed the property visibility in the css. And set the display of #logo to none. The attribute onload in the body is no longer needed.
var fadeTime = 3000; // Time for fading
var waitingTime = 5000; // Time how long image is visible
$(window).ready(function(){
$("#logo").fadeIn(fadeTime);
setTimeout(function(){
$(".pre-wrap").fadeOut(fadeTime);
$(".wrap").delay(fadeTime).fadeIn(fadeTime);
},fadeTime+waitingTime);
});
.pre-wrap, .wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 700px;
width: 900px;
opacity: 1.0;
margin: auto;
}
.pre-wrap {
background-color: red;
}
.wrap {
background-color: black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
So i am trying to make it so when i hover over an image it makes everything else darker around it. I have tried using css but doesn't work.
Here is the my code: jsfiddle.net/vkq09wga/5/
you can do this with CSS only by adding an overlay set to position: fixed and display:none. Set your img to position: relative (so you can apply order) and set a higher z-index than your overlay. As long as the overlay is a sibling or descendant of your img you can show it on :hover:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7); //opaque background
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
img{
position: relative;
z-index: 2;
}
img:hover ~ .overlay{
display:block;
}
HTML
<p>Lorem Ipsum...</p>
<img src="http://www.placecage.com/200/200"/>
<p>Lorem Ipsum...</p>
<div class="overlay"></div>
FIDDLE
UPDATE
Here is a demonstartion of my code with your fiddle:
CSS
.overlay{
display:none;
background: rgba(0,0,0,.7);
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.image img{
position: relative;
z-index: 2;
}
.image img:hover + .overlay{
display:block;
}
HTML
<h1>Title</h1>
<div class="image">
<h3><center>TITLE OF IMAGE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
<div class="image">
<h3><center>TITLE</center></h3>
<img src="..." alt="Image" height="315px" width="100%"/>
<div class="overlay"></div>
</div>
NEW FIDDLE
Jquery Hover Documentation
Jquery Animation Documentation
Jquery Css Documentation
Using this you could animate the darkening of the element by using jquery css to change the opacity and background color of the element on hover.
This fiddle seems to be exactly what you are looking for:
http://jsfiddle.net/49Qvm/28/
$('ul').hover(function(){
$('#darkness').fadeTo(200, 1);
}, function(){
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});