How do I set the opacity of a div background without affecting the text in hero-text? Right now hero-text inherits the opacity of ion-slide.
<style>
.slider {
height: 100%;
width: 100%;
}
.slide {
background-size: cover;
}
#one {
background: url(img/walkthrough-1.png) no-repeat;
opacity: 0.5;
}
#two {
background: url(img/walkthrough-2.png) no-repeat;
}
#three {
background: url(img/walkthrough-3.png) no-repeat;
}
.splash {
bottom: 0px;
}
.hero-text {
}
</style>
<ion-content class="splash" scroll="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide id="one"><div class="hero-text">Test</div></ion-slide>
</ion-slide-box>
</ion-content>
If you need to only adjust the opacity of <ion slide id="xxx"> then I recommend breaking your .hero-text div out and adjusting your styling as necessary to keep your design correct.
With CSS you can adjust the opacity of a background color -- background-color: rgba(0, 0, 0, 0.5) -- which will create a 50% opaque black background color and not affect any children elements. But if you want to reduce the opaqueness of a background image then your only means are to use opacity which will of course affect children.
I used the same concept on a website that also used a "hero image" and I wanted the background image to fade in/out without affecting any text. You may need to use the following CSS to properly place everything:
.hero-wrapper {
position: relative;
}
.hero-wrapper > .bg {
background: ...;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
.hero-wrapper > .text {
position: relative;
z-index: 10;
}
This should work, although it was freehand. Let me know if you want me to explain this anymore or provide a working example. Cheers ~
Edit
Here is a working example of my recommendation via Plnkr :)
Plnkr Demo
Related
I have a <div> with a background-image. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.
My current idea involved adding a :hover state and changing the above images display state to visible along with necessary z-index values.
Could someone give me an example with jsfiddle.net implementation?
Why not use opacity?
The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
.myTransparentImage{
opacity: 0;
}
.myTransparentImage:hover{
opacity: 0.6; /* it's in pourcentage */
}
This way, the transparent image, on hover, will appear at 60% opacity so you can still see the one below. So it is on top of the other image the whole time but only appears once hovered.
Here is an example in a fiddle: https://jsfiddle.net/5ob6n7nq/
Whipped up a quick example for you. Hit "Run code snippet" to see it in action.
.image-holder {
background: url('http://i.imgur.com/5ln9Vmi.jpg');
height: 500px;
width: 500px;
position: relative;
}
.image-holder::before {
content: '';
background: url('http://i.imgur.com/khYHDfJ.jpg');
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.image-holder:hover::before {
opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>
If I correctly understand you: https://jsfiddle.net/3jabz7d3/
<div class="block1">
<div class="block2"></div>
</div>
.block1 {
position: relative;
width: 200px;
height: 200px;
background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center;
background-size: cover;
}
.block2 {
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center;
background-size: cover;
display: none;
opacity: 0.3;
}
.block1:hover .block2{
display: block;
}
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 am currently working on an "overlay pop up", which appears when I click a certain button.
It works quite well, however I struggle with the opacity
My main overlay div appears over the whole site and I gave it an opacity, so that you can see slightly the page in the background.
Over the overlay I put a content div, which shows the actual content (in that case a password changing request).
Anyway, I don't want the content box being transparent, but no matter what I try (z-index:10, opacity:1, position:relative etc.) it doesn't work.
It is still transparent, because I set up the opacity in the overlay div.
Here is the code:
CSS:
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#fafafa;
opacity: 0.9;
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left:40%;
margin-top:15%;
font-family:'source_sans_proregular';
font-size:15px;
position:relative;
}
HTML:
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
.
.
.
</div>
</div>
you need to use rgba in background instead of opacity, because opacity has inheritance properties therefore children will get opacity as well
Note that rgba, stands for Red/Green/Blue/Alpha. and that's the alpha value that will work as your "opacity" value. The greater the alpha value the more opaque will be.
.changePasswordOverlay {
height: 100%; /* changed for demo */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left: 40%;
margin-top: 15%;
font-family: 'source_sans_proregular';
font-size: 15px;
position: relative;
color:white /* demo */
}
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
text
</div>
</div>
Opacity applied the div and its children so .passwordOverlayContent will also have the same opacity, use background rgba instead of opacity
background-color: rgba(0, 0, 0, .9);
changed class :
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .9);
overflow-y: hidden;
transition: 1s;
}
move the passwordOverlayContent container after changePasswordOverlay (instead of inside), and change your css to position:fixed to make it "opacity independant"
I've got a div with a background color and a transparent background image.
HTML
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
CSS
body{
background-color:white;
}
.watermark {
display: block;
position: relative;
}
.watermark::after {
content: "";
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
jsfiddle
I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.
Is there a way to do this?
Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.
You can check this fiddle.
You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.
.watermark {
width: 300px;
height: 100px;
display: block;
position: relative;
}
.watermark::before, .watermark::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.watermark::before {
background:#C52F11;
}
.watermark::after {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
}
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
Updated fiddle
CSS for body , whatever you want
body{
background-color:white;
}
main div(.watermark) with background color, width and height of your choice
.watermark {
width: 538px;
height: 190px;
display: block;
position: relative;
background: #C52F11;
}
watermark after CSS , image with opacity
.watermark::after {
content: "";
background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
opacity: 0.4;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 538px;
height: 190px;
}
I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.
It's a trick:
Insert the image into the webpage anywhere(regardless of the size).
Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).
Take a snapshot of that image.
Remove that image and insert the snapped image where ever you want.
Goal
I would like to create an animated polygon which has parts of it trimmed/cut/masked out so the layer/element/background under it can be seen like this:
I created an animation with CSS3 transform. It is a rotating block that looks like its bottom parts are trimmed down while moving. I would like the trimmed part to show what is actually behind/under the rotating block (so its background).
What I tried
Illusion solution
For single color backgrounds, you can just add a shape on top of the animation so it have the illusion of being cut off.
This obviously doesn't work with pictures:
Limited solution
If you need to cut off the sides in with a rectangular shape, you can do that by a parent element, but this has obvious limitations. How to do something like this but with an arbitrary polygon? Can you mask in CSS?
body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQYV2NMqL7ty4ADMIIkF7SqbsYmP+gkAbAbGgsk/ddhAAAAAElFTkSuQmCC);
}
.center {
width: 200px;
margin: 0 auto;
padding-top: 50px;
height: 100px;
overflow: hidden;
}
.block {
height: 100px;
width: 100px;
background-color: red;
z-index: -1;
transition: transform 1000s 0s linear;
margin-left: 50px;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate {
animation: rotating 2s linear infinite;
}
<div class="center">
<div class="block rotate"></div>
</div>
to trigger z-index, you need to reset position to either: relative, fixed or absolute.
DEMO
#mask {
height: 100px;
width: 100px;
background-color: white;
z-index: 1;
position:relative;/* to trigger z-index */
}
To look like last example, background-position can be efficient.
DEMO box cut off from background
basicly:
body {
background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
background-repeat: no-repeat;
}
#mask {
height: 100px;
width: 100px;
background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
background-size:100vw auto;
z-index: 1;
position:relative;
}
Unfortunately, this won't work with background-size:cover; since body and #mask have different size. background-size will need to be set via javaScript onload and onresize for #mask.
Have you tried to make the white box invisible with bigger z-index than the red box ?
Here you go: http://jsfiddle.net/QxG74/2/
Cute kitting version: http://jsfiddle.net/DpfW7/1/
Give the center div a height of 100 pixels and set the overflow to hidden. This way the rotating square get's trimmed at the bottom.
#center {
width: 200px;
height: 100px;
overflow: hidden;
}