Im working on the opacity of an element using css. a paragraph is place in a div but when i set the opacity of the div to 0.4 the paragraph also affect. I tried to override the div in the paragraph by asigning the opacity 1.0 by this doesnt work. How can I solve this?
The short answer is that you can't. That is just how opacity works.
A longer answer depends on what are you actually trying to achieve (the old XY Problem).
If, for instance, you wanted the background of the div to be translucent, but not the paragraph then you could solve that by using a translucent background instead of making the entire div translucent.
The only way I know to fix this is to separate the background from the content:
<div id="container" style="position: relative;">
<div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;"> </div>
<div id="content">Your content here</div>
</div>
I have done this earlier.
If I remember right, I set the position:absolute; to the innerDiv, hence the opacity property works well.
Another way to achieve this effect is to set the background of the outerDiv with alpha instead of opacity;
For eg:
change
.outerDiv{
background-color: white; //or #fff or rgb(255,255,255)
opacity: 0.4;
}
to
.outerDiv{
background-color: rgba(225,225,225,0.4);
}
The fourth value is the alpha which works like opacity. It will not bother the contents of the div.
Related
I would like to know how can i make the "scroll to the top upon hover" feature found in this website : http://www.creativespad.com/free-divi-layouts/
If you hover on each grid the image will scroll slowly to the top and stop there.
I already found an answer to this on stackoverflow.com
Auto scroll image taller than container on hover
But what i need is that answer without Javascript. In the above link there is a non-javascript answer but have no idea how to modify it for my long image. (see image below)
http://www.creativespad.com/free-divi-layouts/wp-content/uploads/2016/06/mighty.jpg
I dont want javascript cause I am using divi theme and I have no idea where to place the javascript.
I am newbie btw. Thank you soo much for you help
Let me answer your question.But first you need the javascript to know the height of the image. To answer the question "how many pixels will you scroll?". But let's assume you know the image height or you will use a same size images. In this case the key of the solution is to use parent element 'div' with relative position and hidden in overflow child element 'img' with absolute position, 0 top pixel and transition property on the top. Then add hover effect on the child in your case the image with top value "image height - parent height" . you can see the jsfiddle
here is the HTML :
.img-wrapper
{
overflow: hidden;
position: relative;
float: left;
height: 300px;
width: 400px;
border:5px solid #BBB;
border-radius: 5px 5px 5px 5px;
}
.extrem-height-image
{
position: absolute;
top: 0;
width: 400px;
height: auto;
transition: top 5s ease-out 0s;
}
.extrem-height-image:hover
{
top: -300px;
}
<div class="img-wrapper">
<img class="extrem-height-image" src="http://placehold.it/400x600"/>
</div>
Good luck
If you want let img auto scroll, you must set a wrapper with specified width and height! It's not necessary to set width/height for img itself
.img-wrapper{
max-width:80px;
max-height:80px;
overflow:auto;
background:red;
}
<div class="img-wrapper"><img src="http://placehold.it/100x100"></div>
Is it possible to have markup like this but also background overlay on hover?
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="www.google.com">
<img src="http://placehold.it/300x300" />
</a>
</div>
</figure>
I tried placing background-color: #333 on .gallery-icon on hover, but only something like border-bottom appears?
http://codepen.io/filaret/pen/NRpVyr
You are definitely on the right track. Since you are using an :after element for the icon, you should leave that element alone since it's already positioned and defining its own width+height (based off the icon).
The reason the :after selector positions itself correctly is because it's not relying on its parent containers dimensions. You only have it as absolute from the top and left, which is fine. But it doesn't know about how tall it should be, because its parent has no defined height! If you use absolute positioning, you need to define the parent containers dimensions so that the child knows where its bounds are.
So first off, .gallery-icon is already a block element, so you don't need to define its width (its already 100% by nature), just the height:
.gallery-icon {
position: relative;
height: 100%;
}
Second, you should use a :before element to define a background, so that you don't have to mess with the :after icon:
&:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #333;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
Now, you just have to add the opacity change on hover!
&:hover {
.gallery-icon {
&:before {
opacity: .5;
}
&:after {
opacity: 0.6;
}
}
Hope that helps, here is a codepen forked off your original: http://codepen.io/anon/pen/JRWqxX
Edit: I also noticed that your img tag is causing it to go below the visual bottom of the container, a quick fix is just to add:
.gallery-icon {
img {
display: block;
}
You need to understand your markup works. Your image will be displayed on top of everything, and when you put a background colour on .gallery-icon that background colour will be under the image, and since the anchor link doesn't has a width and height, it only take a little bit of portion, that's why it showing a border bottom.
To create a background overlay on hover, you need to position it to be on top of the image.
Using pseudo element to create a background overlay:
&:hover .gallery-icon {
&::before {
content: '';
background-color: #333;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.2;
}
}
The pseudo element has a position absolute so it will displayed on top of the image. top, left, right and bottom 0 to tell the pseudo element to stretch it self as tall and as wide as the parent element.
Hope this helps.
I've tried to simplify the code a little bit. I hope it's what you've tried to achieve.
The trick is to place a as a independent element to img.
<figure class="gallery-item">
<img src="http://placehold.it/300x300">
</figure>
http://codepen.io/anon/pen/LRWoaR
The image (http://placehold.it/300x300) has a solid background colour, no?
That will block anything happening behind itself.
I am trying to make an element opaque, that's in a <div> that is not opaque. I tried simply applying opacity: 1, but the background still showed through the element. I also tried adding !important to the attribute.
Thanks!
If the <div> has a background-color
Instead of using opacity on the <div>, you can use background-color: rgba(red, green, blue, alpha) to specify its background color. Just replace red, green, blue and alpha with their corresponding values.
If the <div> has a background-image
It is not trivially possible. But one workaround would be to have 2 <div>s, one over the other. The lower <div> would be non-opaque, and have a background. The upper <div> would have your content. Use z-index to place the div with the content above the div containing the background image.
Another workaround would be to actually have a transparent PNG image as the background-image of the <div>.
It is not possible, opacity is inherited (mandatory, cannot override), if the parent <div> you're using uses a background image, you have to move the element outside, maybe using absolute position, to locate it over the non-opaque one. If the parent <div> just have a color background and you make a percent transparent, easy!... you need to assign a RGBA color background (and opacity 1, of course).
I recommend a tool I've found useful: http://hex2rgba.devoth.com/ so you can calculate the rgba value properly. That's it
If your parent div simply has a background color or background image, then you can do something like this:
HTML:
<div id="parent">
<div id="child">
<span>Hello World</span>
</div>
</div>
CSS:
#parent{
width: 100px;
height: 100px;
position: relative;
}
#parent:after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url('someimage.png') no-repeat 0 0 transparent;
opacity: 0.7;
z-index: -1;
}
I just want the background image's opacity to be changed. Not the whole items like p.
css:
#home{
background-image: url('../img/main.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height:100%;
opacity: .8;
}
html:
<section id="home">
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
</section>
The rule opacity is for the element. Not for the background. If you need to do that way, you have two options:
Fake the background by using another div and use opacity on it.
Use two different images with one having lesser opacity.
There are a lot of hacks available:
CSS Opacity on Child Element
Using :after and styling it.
while there isnt any way to change the background opacity directly, there is hacky way of doing it.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
taken from here
I don't think there's any property for CSS background transparency.
What you could do is create a child element that fills the space, and apply the background and transparency to that element.
If you want to pure CSS solution, you can create the child element using the :before pseudo selector with an empty content field.
If you're only wanting to change the opacity of a background image, it may be easier to actually save the image with a lower opacity, to avoid writing extra markup.
However, there are hacky work arounds that involve moving the 'child' elements over the top of the background using absolute positioning - there's a really useful article here.
I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.
However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element. It does not work the way I want, anyway.
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
}
HTML : <div id="blur"> </div>
This is an example like what I am looking for: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg
Any idea?
A CSS blur filter will blur what's part of the layer, not what's behind or in front of the layer. So you may need to apply this type of filter directly to the video container.
I'm not 100% sure this is your issue since no HTML was added to the question.
UPDATE:
I just tested this on YouTube.com and if I apply a blur filter directly to the <video /> element, the video plays blurred.
Don't think i understand the question correctly. But if you want a white layer on top of the video you need to add the opacity property in your css code, to give the effect of a transparent overlay.
opacity: 0.4;
Your code should then look like
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
opacity: 0.4;
}