I'm tring to create and put two arrow indicators at the right and left edge of the screen, but so far I'm unable to find a solution for these two issues:
I can't put the arrow sign to the center of the dark container. As you can see they are outside of the container right now! (Although I used flex container with center positioning)
Although we can hard code the position of the elements to the edges of the screen with left property I need a proper solution to correctly position the indicators at the edges in any size of the screen.
Here is the code:
.arrow-container {
width: 100%;
left: 25%;
top: 50vh;
position: absolute;
margin: 0 auto;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
-webkit-perspective: 5000;
z-index: 12;
}
#left-arrow {
left: -22%;
position: absolute;
}
#right-arrow {
right: 28%;
position: absolute;
}
.arrow-container > div {
width: 50px;
height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
border-radius: 5px;
background-color: #3b3a3a;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 200ms;
-webkit-backface-visibility: hidden;
transform: translateZ(0.35rem);
align-items: flex-start;
padding: 10px;
font-size: 5em;
margin: 6px;
filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px 0.01em 1px #0d021a);
transition: background 200ms, transform 300ms;
}
.arrow-container > div span {
}
.key-arrow {
}
<div class="arrow-container">
<div id="left-arrow" class="key-arrow"><span>🢐</span></div>
<div id="right-arrow" class="key-arrow"><span>🢒</span></div>
</div>
Add some css to these ID#right-arrow,#left-arrow
.arrow-container {
width: 100%;
left: 25%;
top: 50vh;
position: absolute;
margin: 0 auto;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
-webkit-perspective: 5000;
z-index: 12;
}
#left-arrow {
left: -22%;
position: absolute;
}
#right-arrow {
right: 28%;
position: absolute;
}
.arrow-container > div {
width: 50px;
height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
border-radius: 5px;
background-color: #3b3a3a;
position: relative;
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 200ms;
-webkit-backface-visibility: hidden;
transform: translateZ(0.35rem);
align-items: flex-start;
padding: 10px;
font-size: 5em;
margin: 6px;
filter: drop-shadow(1px 1px 1px #100021) drop-shadow(1px 0.01em 1px #0d021a);
transition: background 200ms, transform 300ms;
}
.arrow-container > div span {
}
.key-arrow {
}
#right-arrow,#left-arrow{
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
<div class="arrow-container">
<div id="left-arrow" class="key-arrow"><span>🢐</span></div>
<div id="right-arrow" class="key-arrow"><span>🢒</span></div>
</div>
Related
I'm working on a website and made 4 images with hover effects.My problem is the gradient it's not covering the entire image and goes down below it a bit Any solutions
I tried
overflow:hidden;
But didn't do anything
.container {
width: 90%;
padding: 45px;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
position: relative;
width: 250px;
margin: 0px 10px;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
transition: 0.3s;
}
.box img {
border-radius: 5px;
}
.box:hover {
transform: scale(1.2);
z-index: 2;
}
.box img {
display: block;
width: 100%;
height: 100%;
background-size: contain;
text-align: center;
}
.box h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
}
.box h2:hover {
opacity: 1;
}
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 months ago.
I need to make when hovering over a div with an image, there is black background with opacity and when hovering over the button, it changes its values. I got the following:
.promo__girl {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/r0rnSP0/1.png');
position: absolute;
width: 300px;
height: 300px;
margin-top: 136px;
right: 7.469rem;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.promo__girl-image {
width: 100%;
}
.promo__girl-hover {
width: 300px;
height: 300px;
border-radius: 10px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.promo__girl .button_yellow {
font-size: 16px;
color: #162E3C;
background-color: #DDF0A7;
border: 2px solid #DDF0A7;
text-align: center;
margin-top: 10px;
border-radius: 64px;
margin-right: 4px;
height: 52px;
width: 233px;
z-index: 1;
}
.promo__girl .button_yellow:hover {
width: 233px;
background-color: inherit;
color: white;
border-color: white;
opacity: 1;
}
.promo__girl-hover:hover {
background-color: black;
opacity: 0.7;
transition: 0.5s;
}
<div class="promo__girl">
<div class="promo__girl-hover"><button class="button_yellow">Watch Introduction</button></div>
</div>
So now when i hovering image, opacity applies to button to, but i donr need it. Maybe someone will help me? Maybe you can do this with display:none or visibility: hidden/visible? I tried it but there is 0 result.
You can't override parent opacity in a child. But you can use "another" element to be darker... the :after pseudo element. It works.
.promo__girl {
background-repeat: no-repeat;
background-image: url('https://i.ibb.co/r0rnSP0/1.png');
position: absolute;
width: 300px;
height: 300px;
margin-top: 136px;
right: 7.469rem;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.promo__girl-image {
width: 100%;
}
.promo__girl-hover {
width: 300px;
height: 300px;
border-radius: 10px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.promo__girl .button_yellow {
font-size: 16px;
color: #162E3C;
background-color: #DDF0A7;
border: 2px solid #DDF0A7;
text-align: center;
margin-top: 10px;
border-radius: 64px;
margin-right: 4px;
height: 52px;
width: 233px;
z-index: 1;
}
.promo__girl .button_yellow:hover {
width: 233px;
background-color: inherit;
color: white;
border-color: white;
opacity: 1;
}
.promo__girl-hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0;
transition: 0.5s;
pointer-events: none;
}
.promo__girl-hover:hover:after {
opacity: 0.7;
transition: 0.5s;
}
<div class="promo__girl">
<div class="promo__girl-hover">
<button class="button_yellow">Watch Introduction</button>
</div>
</div>
if I apply the will-change: opacity;property to my element with a fixed value of border radious, this will broke the css and not consider the overflow and the radius.
it just happens on Safari, the other browsers are ok.
.card{
border-radius: 80px;
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.bg-image{
position: absolute;
width: auto;
height: 100%;
display: block;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
will-change: opacity; // => COMMENT HERE and it's works
}
.card--content{
z-index: 30;
position: relative;
top: 40%;
height: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.card::before{
content: '';
display: block;
position: absolute;
bottom: 0;
height: 0;
width: 100%;
background-color: white;
z-index: 20;
will-change: height;
transition: height 0.24s ease-in-out;
}
.card::after{
content: '';
display: block;
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
z-index: 10;
background: linear-gradient(180.49deg, rgba(136, 168, 187, 0.217) 40.63%, rgba(0, 122, 194, 0.7) 71.44%);
opacity: 1;
transition: opacity 0.25s linear;
}
.card:hover::after{
opacity: 0;
}
<div class="card">
<img class="bg-image lazy entered loaded" data-src="https://dummyimage.com/600 x 600/cfcfcf/fff.png" aria-label="" data-ll-status="loaded" src="https://dummyimage.com/600 x 600/cfcfcf/fff.png">
<div class="card--content">
content
</div>
</div>
someone had the same problem?
thanks
I'm simply trying to have a line connect a loading bar to a circle.
The line is not being displayed underneath the loading bar however. I've tried messing around with z-indexes and also putting them in containers. Any ideas?
https://jsfiddle.net/sfcurv4h/
body {
justify-content: center;
align-items: center;
background: #1e1e2f;
display: flex;
height: 100vh;
padding: 0;
margin: 0;
}
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 40px;
width: 500px;
z-index: 1;
}
.progress-value {
animation: load 3s normal forwards;
border-radius: 100px;
background: #fff;
height: 30px;
width: 0;
z-index: 1;
}
#keyframes load {
0% { width: 0; }
100% { width: 68%; }
}
.active-services-circle {
width: 40px;
height: 40px;
background: #fff;
border: 2px solid #ACACA6;
border-radius: 50%;
transition: background 1s;
}
.active-services-circle.completed {
border: 2px solid #4B81BD;
background: #4B81BD;
}
.space-between-lb-features {
position: relative;
display: flex;
justify-content: space-between;
width: 600px;
}
.line-connector {
position: absolute;
width: 100%;
height: 50%;
border-bottom: 2px solid #ACACA6;
z-index: -1;
}
<div class="space-between-lb-features">
<div class="progress">
<div class="progress-value"></div>
</div>
<div class="active-services-circle"></div>
<div class="line-connector"></div>
</div>
I had an icon img and was trying to center it inside a card div but is somehow not working. I already tried text-align: center; and display:flex; justify-content: center; and both did not help. I attached my code below. Any help is appreciated. Thanks in advance.
* {
box-sizing: border-box;
}
.card {
background-color: #fff;
border-radius: 4px;
max-width: 0px;
height: 0px;
position: absolute;
padding: 20px;
color: #444;
cursor: pointer;
top: 3%;
right: 0.5%;
}
.card:before {
content: '';
display: block;
position: absolute;
background-color: #ccc;
left: 20px;
right: 20px;
bottom: 0;
top: 50%;
z-index: -1;
box-shadow: 0 0 40px lighten(#000, 60%);
transition: box-shadow .2s ease-in-out;
}
.card.level-1:hover:before {
box-shadow: 0 0 80px lighten(#000, 60%);
}
.card level-1 img {
display: flex;
justify-content: center;
}
<div class="card level-1">
<img src="https://img.icons8.com/windows/32/000000/microphone--v2.png" />
</div>
You should put flex on the container of the image like this:
.card {
display: flex;
justify-content: center;
align-items: center;
}