I have this:
.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}
<div class="ce_text forward block"><div class="fill_bottom"></div>
<p><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></p>
</div>
It works in chrome but not in firefox, can some one help me with the css?
Fiddle
The problem in Firefox seems to be caused by the usage of margin: auto. I have completely re-built your example to eliminate this.
New and Improved
No fixed height. Height is controlled by a percentage (which can be modified) and a min-height.
No extra markup. The triangle is created with a pseudo element and rotated. The text is centered with its <a> wrapper.
Centered triangle. The triangle is centered at any height with bottom: 50% and a negative bottom margin of half its height.
No gaps - The triangle is large enough to eliminate any spacing in the corners. If you need it to be even larger, it can be as large as required; just keep the height to width ratio 1:1 and increase the size of the negative bottom margin.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
h1 {
background: #333;
height: 40%;
min-height: 140px;
position: relative;
overflow: hidden;
z-index: 0;
}
h1 a {
display: block;
height: 100%;
position: absolute;
top: 50%;
margin-top: -0.56em;
left: 100px;
}
h1:before {
content:'';
display: block;
position: absolute;
bottom: 50%;
margin-bottom: -1000px;
left: -2000px;
height: 2000px;
width: 2000px;
background: #F00;
transform: rotate(45deg);
transition: left 0.3s;
z-index: -1;
}
h1:hover:before {
left: 0;
}
<h1><a>Text</a></h1>
Old Solution
Archived - fixed height option (no transform, should work back to IE8)
I have approached this differently:
The right triangle and the bar are made with pseudo elements and are positioned with percentages
z-index: -1 keeps the pseudo elements behind the text.
overflow: hidden prevents the scroll bar when the triangle is pushed outside.
* {
margin: 0;
padding: 0;
}
.headline {
height: 100px;
background: #333;
color: #FFF;
position: relative;
z-index: 2;
display: inline-block;
width: 100%;
height: 0;
padding: 30px 0 70px 50px;
overflow: hidden;
}
.headline:before {
width: 30%;
content:'';
display: block;
height: 100px;
background: #F00;
position: absolute;
top:0;
left: 0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:after {
content: '';
display: block;
border-bottom: solid 50px transparent;
border-top: solid 50px transparent;
border-left: solid 50px #F00;
height: 0;
width: 0;
left: 30%;
position: absolute;
top:0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:hover:before {
width: 100%;
}
.headline:hover:after {
left: 100%;
}
<h1 class="headline">Text</h1>
Related
I have an absolutely positioned div that I want to have slowly increase in size (5s transition) on hover, to become a "border" for a relative-positioned div on top of it:
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
Styles (vendor prefixes removed for readability):
.rectangle {
position: relative;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content {
height: 800px;
width: 200px;
}
Transitioning the overall .background size results in choppy animation but an even border:
.rectangle:hover .background {
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
transition: 5s linear all;
}
Transitioning a border is choppy animation, but (obviously) an even border
.rectangle:hover .content {
border: 20px solid red;
transition: 5s linear all;
}
Transitioning a transform-scale is smooth, but results in a larger top and bottom "border" because it is a rectangle:
.rectangle:hover .background {
transition: 5s transform;
transform: scale(1.1);
}
Any way to either get transform-scale to keep even dimensions, or any other way to create this effect?
You can try using box shadow as a border to achieve smooth transitions.
.rectangle {
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 30%;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 0 0px #000;
transition: 5s linear box-shadow;
}
.content {
height: 300px;
width: 200px;
}
.rectangle:hover .background::before {
box-shadow: 0 0 0 20px #000;
transition: 5s linear box-shadow;
}
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
I've got a problem with border-radius on wrapper that contains an overflow hidden.
I use a before pseudo element (pink background) to fill the wrapper's background. The wrapper has already a background (blue).
#wrapper {
background: blue;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
With this example, we can see an unwanted blue pixel on the top and bottom left corner.
The pseudo element must be in position absolute to apply animation. I removed the animation for the example.
How can I fix this?
A fix is here. Apply overflow:hidden an width:300px to the outer div #container.
#container {
width: 300px;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
height: 90px;
background: blue;
border-radius: 12px;
position: relative;
box-sizing: border-box;
border: 2px solid pink;
}
#wrapper::before {
background: pink;
content: '';
display: block;
height: 100%;
right: -30px;
position: absolute;
top: 0;
width: 30px;
border-radius: 50%;
transition: transform 0.3s;
}
#wrapper:hover::before {
transform: scale3D(10, 10, 1);
}
<div id="container">
<div id="wrapper"></div>
</div>
You found a really interesting rendering issue. My idea to solve it, is switch the colors and logic a little:
#wrapper {
background: pink;
border: 2px solid pink;
border-radius: 12px;
height: 90px;
overflow: hidden;
position: relative;
width: 300px;
}
#wrapper::before {
background: blue;
content: '';
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 50%;
}
<div id="wrapper"></div>
I have the following JSFiddle, which positions an "X" to the left of a pop-out window: http://jsfiddle.net/XDaEk/601/
CSS:
.x {
display: none;
position: fixed;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
.x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(45deg);
transform-origin: center;
}
.x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(-45deg);
transform-origin: center;
}
.alert-div {
display:none;
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
padding-left: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-top: 50px;
background-color: white;
color: white;
opacity:0.7;
overflow-y: auto;
}
HTML
<div class="alert-div2"> <div class="x"></div>Sed ut perspiciatis, unde omnis …</div>
If I copy this exact same CSS & HTML into my file on byethost.com, the "x" appears in the center of the screen. I surrounded the CSS with <style type="text/css"> </style> in the head. The HTML is in the body. I've tried copying this CSS & HTML into another JSFiddle and it works, so it seems to have something to do with Byethost.
There are no console errors related to this.
Here's the actual site. The button to show pop out is at the very bottom. It says "Post Message" http://carouseltest.byethost8.com/aplayground.php (Neither of the 2 errors on the console have to do with this code. They were there before I added this.)
Here's a photo of how it appears on Byethost: http://imgur.com/a/BSzER
Looks like position: fixed is being overridden (although it's difficult to be certain when it's not reproducible). Try updating to:
.x {
display: none;
/* add !important in case this is what's getting zapped and affecting layout */
position: fixed !important;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
I need to create a top border around a top that leaves a partial gap. Something such as:
____________________________ (gap) __________________________
| |
| |
The gap I'm trying to create is on the TOP (ignore the ones on the side, that's just to emphasize it's a div). The gap may or may not be perfectly centered -- in other words, it may vary where the gap exists.
Is it possible to do this with css?
You can use a pseudo element absolutely positioned in your container with a background color that matches whatever the background of your page is.
div {
height: 100px;
border: 1px solid black;
position: relative;
}
div:after {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
content: '';
background: #fff;
width: 100px;
height: 1px;
}
<div></div>
The accepted answer has one flaw, if one want the gap to be "transparent" on top of its background, it won't work if the background is not a solid color.
So to do it on any background, like images, gradient etc., use both pseudo elements, like this:
By altering each pseudo element's width one control both where the gap will be, and its size.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
<div>
</div>
And for anyone who need at text in the gap, here's how-to.
body {
background-image: linear-gradient(to right, orange , yellow);
}
div {
position: relative;
width: 80%;
left: 10%;
top: 45vh;
transform: translateY(-50%);
height: 80px;
border: 1px solid black;
border-top: none;
}
div::before, div::after {
content: '';
position: absolute;
top: 0;
height: 1px;
background: black;
}
div::before {
left: 0;
width: 20%;
}
div::after {
right: 0;
width: 60%;
}
div span {
position: absolute;
top: 0;
transform: translateY(-50%);
text-align: center;
}
div span {
left: 20%;
}
div span {
right: 60%;
}
<div><span>Hello</span></div>