I have a main div called .div1 on top of it I have a fixed div container that contains my fixed div called .fixedDiv. What I'm trying to do is increase the height of class .fixedDiv and make the scroll respond to the height and content of .fixedDiv and not class .div1. How can I achieve this? Thanks in advance.
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
/*not working*/
height: 75vh;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="fixedDivCon">
<div class="fixedDiv">
</div>
</div>
<div class="div1">
</div>
Try this
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
/* Enter desired height here */
height: 75vh;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 100%;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Related
How to remove line behind transparent button in CSS? See Picture Below
How to remove line behind transparent button in CSS? See Picture Below
How to remove line behind transparent button in CSS? See Picture Below
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
}
.line {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line"></span>
<div class="btn"></div>
</div>
This is more of a hack and might not work for you because you didn't provide any code so far.
My idea was to give the (in my case) .outer_box the same background-image as the .background and scale it the same way.
.fullscreen {
height: 100vh;
width: 100vw;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
}
.line {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
background-size: 100vw;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line"></span>
<div class="btn"></div>
</div>
I've making an image and a slide and everything seems to work the way I want it, but the left side reacts when I haven't even reached the image. I've played with if for a while but as it is I can't figure out why.
not to mention I can't find the words but I haven't worked on that part much.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
you have defined the hover for the container and your image has left a margin. Either remover the margin or define hover for the image because of
.actives_center_image_1{
position: relative;
margin-left: 30%;
bottom: 40px;
display: block;
}
.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 40px;
left: 225px;
right: -50%;
background-color: black;
overflow: hidden;
width: 137%;
height: 0%;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: relative;
bottom: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.actives_center_image_1{
position: relative;
bottom: 40px;
display: block;
}
<div class="container">
<img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Or you can define another container and put it inside the main one and do the same thing.
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</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>
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color