Is there any way I can make the content/images none-transparent when inside a <div> that has a transparency?
Here's the HTML:
<div id="main-button-wrapper" class="left">
<div id="button-bg-layer" class="box-bg-layer corners"></div>
<div class="buttons-bg-overlay box-bg-overlay corners">
<img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />
</div>
</div>
CSS:
#main-button-wrapper {
height: 319px;
margin-left: 22px;
position: relative;
width: 321px;
}
#button-bg-layer {
position: absolute;
right: 0;
height: 319px;
width: 321px;
}
.buttons-bg-overlay {
position: relative;
right: 0;
margin: 11px;
height: 66px;
width: 299px;
text-align: center;
padding-top: 26px;
}
#buttons-wrapper {
position: relative;
width: 299px;
height: 297px;
z-index: 3;
margin: 22px;
}
/* Background Layers */
.box-bg-layer {
background-color: #010101;
z-index: 1;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
.box-bg-overlay {
background-color: #010101;
z-index: 2;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
I've tried putting a z-index: 4; on the image. The only other way I can think of is setting the div backgrounds as absolute positioning, then positioning the content outside of the div but there must be an easier way?
Any help would be much appreciated!
See JSFiddle:
http://jsfiddle.net/Sa8jw/
Instead of using opacity use rgba where a stands for alpha. This will make the child elements non transparent...
background-color: rgba(0,0,0,.5); /* RGBA for #010101 will be rgba(1,1,1,.4) */
Where .4 for a is equivalent to opacity: 0.4
Demo
Here's a js fiddle for your help :-)
FIDDLE
and the changed code . where the opacity is being added to pseudo class after
#main-button-wrapper {
height: 319px;
margin-left: 22px;
position: relative;
width: 321px;
}
#button-bg-layer {
position: absolute;
right: 0;
height: 319px;
width: 321px;
}
.buttons-bg-overlay {
position: relative;
right: 0;
margin: 11px;
height: 66px;
width: 299px;
text-align: center;
padding-top: 26px;
}
#buttons-wrapper {
position: relative;
width: 299px;
height: 297px;
z-index: 3;
margin: 22px;
}
/* Background Layers */
.box-bg-layer{
background-color: #010101;
z-index: 1;
zoom: 1;}
.box-bg-layer : after{
filter: alpha(opacity=40);
opacity: 0.4;
}
.box-bg-overlay { background-color: red;
z-index: 2;
zoom: 1;
}
.box-bg-overlay :after{
filter: alpha(opacity=40);
opacity: 0.4;
}
Related
I would like to add an opacity on the clip-path/clip (the area covered by the clip path) like the picture shown below.
Below is my code for the same
.item--clip .demo {
width: 200px;
height: 250px;
}
.item--clip .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
/* Common ------------------------------------------- */
.item {
position: relative;
margin-bottom: 2em;
padding-bottom: 2em;
padding-right: 3em;
border-bottom: 1px solid #DDD;
/* counter-increment: mylist; */
}
.item::before {
/* // content: counter(mylist); */
position: absolute;
right: 0;
top: 0;
font: 2rem/1 Georgia, serif;
color: #EEE;
}
.item::after {
content: '';
display: table;
width: 100%;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo::before {
content: '';
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: .7s;
}
.text {
padding-left: 230px;
}
.item:hover ::before {
opacity: .4;
}
<div class="wrapper">
<div class="item item--clip">
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask" />
</div>
</div>
</div>
This is the purpose of mask:
img {
width: 200px;
height: 250px;
-webkit-mask:
/* X Y / wwidth height */
linear-gradient(#000 0 0) 10px 10px/170px 170px, /* control the clipped part here*/
linear-gradient(rgba(0,0,0,0.4) 0 0); /* control the opacity here */
-webkit-mask-repeat:no-repeat;
}
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" />
Try using the "opacity" command:
.item - clip .has-mask {
position: absolute;
clip: rect (10px, 190px, 190px, 10px);
opacity: 0.5; / * 50% opacity * /
}
I'm trying to create a background effect using before and after pseudo elements by making it one pixel taller and wider than the actual element, but it always seems to have one extra pixel to the right or left. This only happens when the browsers is maximized (Firefox, Chrome and Edge), but does not happen when the browser has a smaller width.
*, *::before, *::after{ box-sizing: border-box; }
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
background-color: #111;
}
img {
max-width: 300px;
display: block;
padding: 4px;
}
.main-box {
position: relative;
}
.img-box {
padding: 0;
margin: 0;
background-color: #000;
}
.img-box::before{
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
filter: blur(10px);
z-index: -2;
}
.img-box::after{
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
z-index: -1;
}
.img-box::before, .img-box::after{
background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
opacity: 0.7;
transition: opacity ease-out 150ms;
}
.main-box:hover .img-box::after {
opacity: 1;
}
<div class="main-box">
<div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>
It's not quite clear in the picture, but in the browser all sides of the background-image is 1px more except for the left side where it's 2px more.
OUTPUT: Thicker line on the left
This looks like antialiasing. I guess you have either your browser's either your OS's zoom level set to something else than 100%.
Some browsers will try to round the positionning, but at some zoom level, this can't be done properly and you'll end up having one side floored and the other ceiled.
To circumvent this, you can use the translate property which should allow proper antialiasing to kick in (it will be blurry, but of the same size).
*, *::before, *::after{ box-sizing: border-box; }
body {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
background-color: #111;
}
img {
max-width: 300px;
display: block;
padding: 4px;
}
.main-box {
position: relative;
}
.img-box {
padding: 0;
margin: 0;
background-color: #000;
}
.img-box::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: calc( 100% + 2px );
height: calc( 100% + 2px );
transform: translate(-1px,-1px);
filter: blur(10px);
z-index: -2;
}
.img-box::after{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: calc( 100% + 2px );
height: calc( 100% + 2px );
transform: translate(-1px,-1px);
z-index: -1;
}
.img-box::before, .img-box::after{
background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
opacity: 0.7;
transition: opacity ease-out 150ms;
}
.main-box:hover .img-box::after {
opacity: 1;
}
<div class="main-box">
<div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>
I want to add blur behind text up to some amount of padding. I don't want some div behind and blur the div, I want it to be bound to the text.
Here is my attempt:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.image {
z-index: -1;
object-fit: cover;
}
.text {
z-index: 2;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
}
.text::before {
content: "";
position: absolute;
z-index: 1;
top: -5px;
bottom: -5px;
left: -15px;
right: -15px;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<img class="image" src="https://source.unsplash.com/random" />
<h1 class="text">Example Text</h1>
</div>
I am getting like this:
I want the edges to be not blurred.
I want something like below:
You can consider overflow:hidden to stop the blur effect and have a sharpe edge. I also considered padding instead of adjusting top/left/right/bottom:
.container {
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
.text {
z-index: 1;
position: absolute;
width: auto;
bottom: 24px;
left: 24px;
font-size: 36px;
padding: 12px 22px; /*added this*/
overflow: hidden; /*added this*/
}
.text::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
opacity: 0.4;
filter: blur(10px);
}
<div class="container">
<h1 class="text">Example Text</h1>
</div>
Here are my box classes
.rectangle-box {
width: 200px;
height: 30px;
background: #808080;
opacity: 0.3;
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
In HTML:
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
DEMO: https://jsfiddle.net/uq6ectfc/1/
I need rectangle-red to have opacity of 1 and rectangle-box of 0.3. But it sticks to the parent opacity.
How can I fix it?
You can't the opacity cannot be greater than parent
but you can use two methods
I have used rgba rgba(0,0,0,0.0)
.rectangle-box {
width: 200px;
height: 30px;
background: rgba(128, 128, 128, 0.3);
float: right;
position: relative;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Or the second method i have used :pseudo element to add a background
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:after {
content: '';
opacity: 0.3;
background: #808080;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index:-1;
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="rectangle-red"></div>
</div>
Use RGBA instead of hex. using opacity: affects child elements and rgba does not
.rectangle-box {
width: 200px;
height: 30px;
background-color: rgba(128,128,128, 0.3);
float: right;
}
.rectangle-red {
width: 65px;
height: 30px;
background-color: rgba(255,71,66, 1);
float: left;
}
A better way to structure this would be to create a div that contains both boxes. This way each of the boxes opacity will not interfere with each other.
<div class="container">
<div class="rectangle-box"></div>
<div class="rectangle-red"></div>
</div>
.container{
width: 200px;
height: 30px;
float: right;
}
.rectangle-box {
width: 100%;
height: 100%;
background: #808080;
opacity: 0.3;
}
.rectangle-red {
width: 65px;
height: 100%;
background: #ff4742;
opacity: 1;
float: left;
}
you can't
All you can do is create element inside .rectangle-box absolute (my case) or relative or whatever you want with lower opacity .lower-opacityso they are siblings and not disturb each other opacity property
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.lower-opacity{
position: absolute;
opacity: 0.3;
width: 100%;
height: 100%;
background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
width: 65px;
height: 30px;
background: #ff4742;
opacity: 1;
float: left;
}
<div class="rectangle-box">
<div class="lower-opacity"></div>
<div class="rectangle-red"></div>
</div>
Here is a nice and neat way using pseudo elements.
With this you can as well add images and svg to each background which gives a lot of options.
If you need other elements within each box, you'll need the second inner div.
.rectangle-box {
width: 200px;
height: 30px;
float: right;
position: relative;
}
.rectangle-box:before {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background: #808080;
opacity: 0.3;
}
.rectangle-box:after {
content: "";
top: 0;
left: 0;
width: 65px;
height: 100%;
position: absolute;
background: #ff4742;
opacity: 1;
}
<div class="rectangle-box">
</div>
Hello i am trying to create hover effect on img.
HTML
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
css
div {
width: 350px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
height: 100px;
opacity: 0;
transition: all 0.4s;
}
div:hover .link-cont {
opacity: 1;
bottom:-100px;
}
i need a something like this , when the user hover on it
but i am getting something like this
can someone help me to achieve what i am trying to do..
jsFid--> http://jsfiddle.net/Nnd7w/
You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
Try this - and let me know if it works for you..
Fiddle
Just a few changes - Could use some cleaning up.
div {
position: relative;
top: 50px;
background-color: blue;
width: 350px;
height: 150px;
margin: auto;
}
.link-cont {
background: red;
position: relative;
left: -50px;
top: -200px;
width: 450px;
height: 250px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div a {
position: relative;
top: 210px;
left: 50px;
opacity: 0;
}
div:hover .link-cont {
opacity: 1;
}
a {
text-decoration: none;
color: #fff;
}
div:hover a {
opacity: 1;
}
Made a few modifications to you CSS
div {
width: 370px;
position: relative;
}
.link-cont {
background: red;
position: absolute;
top: 0;
width: 370px;
height: 200px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
}
div:hover img {
margin-left: 10px;
margin-top: 10px;
}
.link {
display: block;
margin-top: 170px;
margin-left: 50px;
}
Instead of playing with bottom property, I just changed opacity. I also assigned a class to anchor tag to make it display under the image. Also, you can see I have given some margin to the image to make it center and changed the width and height of your link-count div.
See Fiddle
I just changed bottom:-100px; to top: 160px; and it works fine!
Fiddle
Edit: Some more options because I don't understand:
Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)