I have a problem with my code I have mentioned this - overflow: hidden in the css but still my video is not shown below the text.I have mentioned the following in my css :
fullscreen-bg {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
`enter code here`z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This wasn't written by me but it should give you a rough idea how to do it,
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
source:
https://codepen.io/dudleystorey/pen/knqyK
Related
Here is a link to something similar.
https://codepen.io/suez/pen/RpNXOR
.img {
overflow: hidden;
z-index: 2;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-size: cover;
background-image: url(/images/art.png);
transition: transform 1.2s ease-in-out;
}
.img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
Is there a reason why the button and text disappear behind the image when it transitions ove
If you are looking to have your text & button appear on top of the image, the text & button must have a higher z-index than 2 because assuming that your .img class controls your image, your image is declared as z-index: 2;. Try adding the z-index: 3; declaration to both your text & button.
How to create a partial width opacity ?
I have a div that has a background image with transparency, I used after to do get the effect like this
.indicators-menu {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.indicators-menu::after {
background-image: url('bg_platform_repeat.jpg');
content: "";
opacity: 0.9;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
This works great, but what I need to do is to split the opacity by width
instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
I thought to use the CSS mask property but I see that its not well supported
what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
Use two pseudo-elements with the same background image but position them differently.
div {
width: 460px;
height: 300px;
margin: 1em auto;
border: 1px solid red;
position: relative;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(http://www.fillmurray.com/460/300);
background-repeat: no-repeat;
background-size: cover;
}
div:before {
width: 80%;
opacity: 0.5;
/* for example */
}
div:after {
width: 20%;
left: 80%;
background-position: 100% 0;
}
<div>
</div>
One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:
.box {
background:
linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
url('https://picsum.photos/200/200?image=1069') center/cover;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
<div class="box">
</div>
Use :before with background: white; and opacity:0.1(I set 0.4 only you to see the difference) and width:80%
.indicators-menu::after,.indicators-menu::before{
background-image: url('https://i.imgur.com/BK7wL0d.jpg');
content: "";
opacity:1;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
.indicators-menu::before{
background: white;
opacity: 0.4;
z-index: 2;
width: 80%;
}
<div class="indicators-menu">
</div>
so i have a container div which holds 5 other divs (see picture ) and on hover those divs slide in the direction the arrow is pointed ( to right of picture ). I achieved this simply with CSS's :hover property. However, it achieved it's purpose but I simply just do not like the result ( see snippet ); certain mouse positions would cause the div to go back to the original position then back to hovered position again. Any ideas for improving the hover property? Picture
body, html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow : hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before, #summer:before, #winter:before, #autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}
#spring:hover {
left: -10%;
top:-10%;
}
#winter:hover{
left:-15%;
top:65%;
}
#autumn:hover{
left:65%;
top:65%;
}
#summer:hover {
left: 65%;
top:-15%;
}
#spring:before {
bottom: -100px;
right: -100px;
}
#summer:before {
bottom: -100px;
left: -100px;
}
#winter:before {
top: -100px;
right: -100px;
}
#autumn:before {
top: -100px;
left: -100px;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Instead of moving the main div, you create pseudo elements and move them.
When done like that, it will solve the hover issue.
Note, you might need to adjust the movement a little, I just made them up to show how-to
body,
html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before,
#summer:before,
#winter:before,
#autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
transition: 0.6s;
border-radius: 50%;
transform-origin: left top;
}
#spring:before {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
#summer:before {
top: calc(100% - 100px);
left: -100px;
}
#winter:before {
top: -100px;
left: calc(100% - 100px);
}
#autumn:before {
top: -100px;
left: -100px;
}
#spring:after,
#summer:after,
#winter:after,
#autumn:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
transform-origin: left top;
z-index: -1;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
#spring:hover::before,
#spring:hover::after {
transform: translate(-30%,-15%);
}
#winter:hover::before,
#winter:hover::after {
transform: translate(-15%,30%);
}
#autumn:hover::before,
#autumn:hover::after {
transform: translate(30%,15%);
}
#summer:hover::before,
#summer:hover::after {
transform: translate(30%,-15%);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>
Seems Google Chrome 36 is broken and does not understand top:50% in my example.
IE 11, Opera 12.17 and Firefox 31 work just fine. Chrome and Safari are broken (and I guess other WebKit/KHTML browsers are broken too).
<div class="box_outer">
<div class="box_inner">
<div class="box">
<h1>Hello</h1>
</div>
</div>
</div>
<style>
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: relative;
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
</style>
I know I can do the following:
.box_outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
But this is not a solution to the problem just a different approach.
How can I fix it for Chrome with minimal changes?
You can test it on JSBIN here
Ok, here's the fix. For me it seems like a bug in Webkit browsers.
.box_outer {
bottom: 0px;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: absolute; /* INSTEAD OF relative */
}
.box {
position: absolute;
left: -220px;
width: 400px;
top: -220px;
height: 400px;
background-color: red;
}
I am not clear what you are trying to do here, but the result that you are getting in other browsers can be achieved in crome using:
.box_inner {
top: 50%;
left: 50%;
width: 0;
height: 0;
position: fixed;
}