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;
}
Related
I have this small image and i want to repeat so that it looks like a shadow on top of my div that it's like a cookies notification. How can i position it on top of my div cookieConsent like a shadow on the top?
THE IMAGE:
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 9999;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
You don't need to use an image for this, you can use the box-shadow properties and negative values - specifically the y and spread properties.
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
box-shadow: 0px -4px 10px -2px rgb(0, 0, 0,0.4);
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
If you need to use an image, set the image as a background on a pseudo element:
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
#cookieConsent {
width: 100%;
background-color: #474540F2;
position: fixed;
bottom: 50px;
left: 0;
right: 0;
z-index: 9999;
}
#cookieConsent::before {
content: '';
display: block;
background-image: url(https://via.placeholder.com/10);
background-repeat: repeat-x;
width: 100%;
height: 10px;
position: absolute;
left: 0;
top: -10px;
}
.cookieContainer {
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 12px;
}
.cookieConsent-txt {
color: #FFFFFF;
width: calc (100% - 101px);
margin: 0;
}
#cookieConsent a.cookieConsentOK {
width: 85px;
height: 56px;
background: #FFFFFF;
display: inline-block;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
<div id="cookieConsent">
<div class="cookieContainer">
<p class="cookieConsent-txt">
This site uses cookies
</p>
<a class="cookieConsentOK">Aceitar Cookies</a>
</div>
</div>
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>
I'm creating a dropdown menu with CSS, it different options depending on the page it could be 1 or 2 options, I will share the css code. My issue is why the position of the tooltip dialog changed depending on how many options do we have:
This is how it looks like with two options:
This is how it looks like with 1 option:
As you can see the position change according with the number of options, here is the code:
.container {
display: flex;
width: auto;
height: auto;
position: relative;
justify-content: center;
}
.tooltip {
min-width: 10rem;
width: auto;
min-height: 2rem;
height: auto;
background-color: var(--app-secondary-color);
text-align: center;
position: absolute;
z-index: 1;
font-size: 1.2rem;
display: flex;
justify-content: flex-start;
padding: 1rem;
flex-direction: column;
box-shadow: 0 0.3rem 1.2rem #CCC;
transform: translate(-25%, calc(40%));
border-radius: 3px;
top: 0;
}
.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -10px;
left: calc(75% - 10px);
border-bottom: solid 5px var(--app-secondary-color);
border-left: solid 10px transparent;
border-right: solid 10px transparent;
border-top: solid 5px transparent;
}
<div class="container">
<i>Icon picture</i>
<div id="tooltipTop" class="tooltip">
<span>Option 1</span>
<span>Option 2</span>
</div>
</div>
What do you think should I changed on my css or do am I missing something?
remove calc(40%) and instead try using margin-top to fix the dropdown.
.tooltip {
margin-top: 2em;
min-width: 10rem;
width: auto;
min-height: 2rem;
height: auto;
background-color: var(--app-secondary-color);
text-align: center;
position: absolute;
z-index: 1;
font-size: 1.2rem;
display: flex;
justify-content: flex-start;
padding: 1rem;
flex-direction: column;
box-shadow: 0 0.3rem 1.2rem #CCC;
transform: translate(-25%);
border-radius: 3px;
top: 0;
}
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'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>