Currently my webkit transform for scaling would affect the border radius, making it distorted. Is there any css3 hack that will allow me to preserve the rounded corners?
Example
Just manually manipulate the width and height, rather than using scaling:
#pan {
width:500px;
height:500px;
position:relative;
background:#aaa;
}
#rec {
width:100px;
height:100px;
position:absolute;
top:250px;
left:250px;
background:#fff;
-webkit-transition:500ms cubic-bezier(0.785, 0.135, 0.000, 0.940)
}
#rec:hover{
/*-webkit-transform:scale(3.5,1);*/
width:300px;
left:150px;
-webkit-transition:500ms linear;
-webkit-border-radius:35px;
}
<div id="pan">
<div id="rec"></div>
</div>
You could put your element of interest in a div. Then you could move the css border* from your element to the outer div. You can then apply a scaling** transform to your original element; the border (now in the outer div) should be unaffected.
*(and possibly other attributes such as absolute positioning, sizing, etc.)
**(any further transforms, such as rotations or 3d transforms, could then be applied separately to the outer div)
Related
I found a wired thing when I apply the transform to an element, it changes the z-index order, the code as:
<button class="test">
click me
</button>
css:
.test{
border-radius:100px;
transition:all 1s;
position:relative;
}
.test:hover{
transform:translateY(30px);
}
.test::after{
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
background:blue;
width:100%;
height:100%;
}
codepen: https://codepen.io/JianNCI/pen/jZQRpz?editors=1100
I was intending to hide the :: after content by setting thez-index order to -1 and I am setting the blue background color for distinguishing them. but once I hovering on the button, the hiding content will overlap the button. so my questions are:
Why the z-index:-1not working when I hovering on it? it is supposed to remain as -1 since I only set the transform property within the hover effect.
When I replace the transform property like color: red, it is work as I expected. So I am wondering if this the transform makes the z-index:-1 lose effect in this case?
When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:25px;
height:25px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
#foo .blah{
transform:translate3d(-100%,-100%,0);
-webkit-transform:translate3d(-100%,-100%,0);
width:100px;
height:100px; }
And a jsfiddle http://jsfiddle.net/84w4hj99/4/
I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.
Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.
See http://jsfiddle.net/y3xqak1z/
This question already has answers here:
CSS background-image-opacity?
(13 answers)
Closed 8 years ago.
I want know that "How can I change background image opacity without changing on div content?"
I searched too much & I don't find a good answer to solve this issue!
HTML
<div class="div-1">
<h2>title</h2>
<p>text</p></div>
CSS
.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
DEMO
You can use after or before pseudo element for background-image.
Css:
.has-bg-img{
position: relative;
}
.has-bg-img:after {
content:'';
background: url('http://placehold.it/500x100') no-repeat center center;
position: absolute;
top:0px;
left: 0px;
width:100%;
height:100%;
z-index:-1;
opacity: 0.2; /* Here is your opacity */
}
Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:
1. Use transparent background images (easiest imo)
Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).
2. Use positioning.
If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]
3. Use sibling elements in the same position
If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.
There are more, but one of those should get you what you want.
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
check how is done
http://css-tricks.com/snippets/css/transparent-background-images/
You can try this.....
<div style="position:relative; ">
<div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>
<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
Your Div Contents are Here..................
</div>
</div>
I have a div in which there is an a tag.
I gave opacity:0.5 to the div then the text inside opacity is also 0.5
I don't want to use background image, then how can I have a text with opacity:1 inside my div with opacity:0.5 ??
Set the background color of the parent using rgba (includes alpha transparency). Example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
If you want to use a background-image, just set the opacity on the image itself (use a PNG).
You can't. The real child opacity can't be greater than its parent's opacity in the HTML rendering model.
From the documentation (emphasis mine) :
Opacity can be thought of as a postprocessing operation. Conceptually,
after the element (including its descendants) is rendered into an RGBA
offscreen image, the opacity setting specifies how to blend the
offscreen rendering into the current composite rendering.
You must put your child div outside the parent div. This is usually achieved using a different kind of positioning than the static one.
Use a totally different <div> for the text.
<div id="parentDiv">
<div id="mainDiv">
</div>
<div id="childDiv">
Hello
</div>
</div>
CSS
#parentDiv
{
position:relative;
}
#childDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#mainDiv
{
width:100px;
height:100px;
opacity:0.5;
}
Check it out : http://jsfiddle.net/AliBassam/aH9HC/ I added background colors so you can notice the result.
Since I'm forcing you to use absolute, I don't want you to have a problem with positioning the text, so make some mathematical calculations to get the best position:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).
Like the answer above states, you'd need a separate div for the text, absolutely positioned to fit over the opaque div. You might want to set the z-index to something high as well.
Warning: this solution will work only if you want outer element to be completely transparent.
Instead of opacity: 0 and opacity: 1 use visibility: hidden and visibility: visible
Worked in my case (may not work in yours but it's worth the shot) :)
I would like to have a background image, from a URL (So I can't edit its opacity manually)
with an low opacity and write content on top of it:
but the content should be with the normal 1 opacity
http://jsfiddle.net/ca11111/BAJN5/
edit: http://jsfiddle.net/ca11111/BAJN5/1/ slightly better
The opacity property is inherited. If you set opacity < 1 for an element, all its child elements will also have that < 1 value for opacity and you cannot change this.
The easiest way to achieve what you want is to use multiple backgrounds and have a semi-transparent background on top of your image. Of course, this raises some browser compatibility problems (see multiple backgrounds support and gradient support).
Example here: http://dabblet.com/gist/2818293 (should work in IE10, Opera 11+ and every non-dinosaur version of other desktop browsers)
There is also the option of not setting the background on the parent, but on a child with no children of its own (or on a pseudo-element), that is absolutely positioned and has a z-index < than that of the parent (which has an rgba background).
You mean something like this? http://jsfiddle.net/BAJN5/2/
Try setting it this way:
<div style="position:relative"> <!-- wrapper div (relative) -->
<div style="background:url(an-image-url) no-repeat center center; opacity:0.5; height:220px"></div> <!-- half opacity background -->
<span style="opacity:1; position:absolute; z-index:1"><!-- full opacity (absolute) -->
some text
......
</span>
</div>
see i have made through pseudo-elements :before & :after
HTML
<div class="addFav">
<div>asdfasfasfafs</div>
</div>
CSS
.addFav:before {
background:url(http://lorempixel.com/400/200/sports) no-repeat;
border:1px solid red;
height:200px;
width:400px;
color:#000;
padding:15px;
position:absolute;
content:"";
opacity:0.1;
}
.addFav {
height:200px;
width:400px;
color:red;
padding:15px;
position:relative
}
see the demo:- http://jsfiddle.net/8LFLd/66/
Updated Demo here http://jsfiddle.net/8LFLd/68/
This page shows a technique for emulating background image opacity using a psuedo element
Hey i think you should want this
Define your Main Div rgba properties
div {
background: rgba(200, 54, 54, 0.5);
}
more info http://css-tricks.com/rgba-browser-support/