There are the following code:
<div class="google-wrapper">
<div id="google-map"></div>
<div id="google-map-overlay">
<p>Loading...</p>
</div>
</div>
I want that google-map-overlay is over google-map and has red color and I could see google-map, i.e. google-map-overlay should be transparent div. Some styles:
.google-wrapper {
position: relative;
}
#google-map {
width : 500px;
height : 380px;
}
#google-map-overlay {
width : 500px;
height : 380px;
background: red;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
}
But I don't know how I can do a transparent overlay. Thanks in advance.
you need add opacity like this DEMO
#google-map-overlay {
width : 500px;
height : 380px;
background: red;
position: absolute;
opacity: 0.5;/*add this*/
top: 0px;
left: 0px;
z-index: 99;
}
it offhand, I would like to see exactly what you want to eventually get
Related
Ive got a product page with a smaller image of the product.
Now I want to show a bigger version of this image with a colored background covering the whole page, while I hover the smaller image.
The problem is, that the bigger image flickers while I move the mouse around.
My CSS:
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}
My HTML:
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
Can you help me? Maybe my way of thinking is wrong.
I think it flickers because when I show the bigger image, it is above (z index) the small one and I am not hovering the image anymore so it disappears.
I would also love to solve this with javascript, if you can give me any advice.
You need to specify dimensions for the container of the image. This is why it is flickering. I also used display: none; and display:block to hide and show the images.
.productdetails {
position: relative;
}
#zoomed-product-img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* This is the product detail image styles */
.productsdetail-image {
display: block;
height: 200px;
width: 200px;
}
.productsdetail-image:hover img {
display: none;
}
.productsdetail-image:hover + #zoomed-product-img {
display: block;
}
HTML
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/200/200/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Demo:
http://jsfiddle.net/n07bt46y/
Please check this in full page
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
});
.productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Are you wanna build something like that? Hoppefully that fiddle can help you
I am trying to create a graoh to show positive and negative value by percentage so if value will be negative it will be red bar if value will be positive it will run red bar so the thing is that I am having issue when I set width to 46 or 50% the bar is showing to be of full size as it shouldn't be can anyone help me out with this please
.box {
position: relative;
width: 400px;
height: 30px;
background-color: #333
}
.bar_red {
background-color: #d40216 !important;
left: 50%;
width: 13%;
max-width: 180px;
}
.bar_green {
right: 50%;
}
.bar_green,
.bar_red {
width: 42%;
height: 20px;
background-color: #88c500;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
<div class="box">
<div class="bar_red" style="width: 50%;"></div>
<div class="bar_green" style="width: 50%;"></div>
</div>
https://jsfiddle.net/vck8wchh/
First of all your bars are pulled 50%. see example below
.bar_green {
right: 50%;
}
.bar_red {
left: 50%;
}
So this means that if you fill in 50% or higher in your <div style="50%"> it will be full width. Go to your fiddle and for example replace your HTML with the following:
<div class="box">
<div class="bar_red" style="width: 10%;"></div>
<div class="bar_green" style="width: 30%;"></div>
</div>
You'll see that they won't be fully filled. new jsfiddle
May I suggest a simpler solution? In my snippet the green bar is 100% wide, while the red bar gets a percentage width, is right-aligned and covers the green one using a higher z-index. So you only have to set the percentage of the red bar.
.box {
position: relative;
width: 390px;
height: 20px;
background-color: #333;
border: 5px solid #333;
}
.bar_green,
.bar_red {
height: 20px;
position: absolute;
}
.bar_green {
left: 0;
width: 100%;
background-color: #88c500;
z-index: 1;
}
.bar_red {
background-color: #d40216 !important;
right: 0;
width: 42%;
z-index: 2;
}
<div class="box">
<div class="bar_red"></div>
<div class="bar_green"></div>
</div>
I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here
I would like to achieve the following:
Have a fluid container with one background color on each side - but the separator should be two cols in the inside container.
I tried to describe it in this picture. Is this even possible?
use css positions and after/before see the link below:
Codepen
.container {
background: #ddd;
height: 250px;
}
.extra1 {
height: 250px;
background: #fff;
position: relative;
z-index: 999;
}
.extra2 {
height: 250px;
background: #000;
}
.extra1:before {
content: '';
background: yellow;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
left: -200%;
}
.extra2:before {
content: '';
background: green;
position: absolute;
width: 300%;
top: 0px;
height: 100%;
right: -200%;
}
.your-things {
position: absolute;
left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 extra1">
<div class="your-things">
<p>.col-md-4</p>
</div>
</div>
<div class="col-md-8 extra2">
<div class="your-things">
<p>.col-md-8</p>
</div>
</div>
</div>
</div>
This can be done using psuedo element before and after on .container-fluid class or give any other class name.
Here is a code pen demo:
`http://codepen.io/duptitung/pen/adNOpV`
ya, you can give background image of the specific color and place it on that specific region
css
.container-fluid{
background:url( //image link// );
background-position: // arrange image // ;
background-size: auto 100%;
}
I have 3 overlapping html divs, one next to another, colored: red, green and blue. All elements have opacity 0.5. First two divs (red and green) I want to summate color (creates something between red and green) - standard behaviour, without changes here.
My problem is how to prevent summating colors only between green and blue divs?
It would be great if we could do this without additional elements.
html:
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
EDIT:
I forgot about: http://plnkr.co/edit/5MIduRMFo0dZ54xqzpAa?p=preview
It should look likt this (fourth element is to show that blue also has opacity):
If you want to keep opacity of all divs to be still 0.5. Then here is your pure CSS solution. No additional elements added.
Here is a fiddle for that.
http://jsfiddle.net/tdh7ks2x/2/
**HTML**
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
**CSS**
#d2 {
opacity: 1;
height: 100px;
width: 120px;
left: 300px;
top: 80px;
}
#d2:before,
#d2:after{
content: "";
position :absolute;
left: 0;
top: 0;
height: 100px;
background-color: blue;
}
#d2:before{
width: 30px;
z-index: 2;
opacity: 0.99999999;
background-color: #7F7FFF;
}
#d2:after{
width: 120px;
z-index: 1;
opacity: 0.5;
}
#d4 {
width: 200px;
height: 80px;
left: 400px;
top: 90px;
background-color: red;
}
Just added this CSS instead of #d2, rest all your CSS is fine. Let me know if this resolves your issue.
Pick the color of the div with opacity and use it in the ":before" div.
You can use z-index property to bring a div to front or back. Higher the value of z-index to move it to the top and decrease it to move it back.
Moreover you have used opacity:0.5 due to which you will see the back colors at the intersection. You must increase the opacity to see the exact colors there
div {
position: absolute;
opacity: 0.5;
}
#d0 {
top: 60px;
height: 100px;
left: 50px;
width: 100px;
background-color: red;
z-index:2
}
#d1 {
height: 150px;
left: 130px;
top: 50px;
width: 200px;
background-color: green;
}
#d2 {
height: 100px;
left: 300px;
top: 80px;
width: 120px;
background-color: blue;
}
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
css:
Basically, this problems occurs due to overlapping transparent colors. Example is rgba(255,255,255,0.3) overlapping with rgba(255,255,255,0.3) to form a brighter color.
If your design can do without transparent colors, you can easily solve this by converting your transparent colors (rgba) to fully opaque ones (hex) for related elements.
You will need the background color to help compute a fully opaque hex from rgba or just use a color picker browser extension after rendering.