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;
}
Related
I would like to scale my header card image but to not overlap over header title.
How can we manage that? THanks.
Here is
codepen link
html
<div class="single-box">
<div class="header-area img1"></div>
<div class="body-area">
<h3>Banana</h3>
<p>
Lorem ipsum
</p>
</div>
</div>
css
main {
width: 80%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 30px auto;
padding: 30px 0;
}
.single-box {
flex-direction: column;
align-self: center;
width: 270px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 10px 10px 10px 10px;
margin: 30px 0;
overflow: hidden;
/* max-height: 100%; */
}
.header-area.img1 {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
object-fit: contain;
width: 100%;
}
.header-area {
background-size: cover;
/* padding: 100px 30px; */
height: 200px;
background-position: center center;
border-radius: 10px 10px 50% 0;
/* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
transform: scale(1);
transition: all .3s;
/* position: relative; */
/* max-height: 100%; */
/* overflow: hidden; */
}
.header-area.img1:hover {
transform: scale(1.3);
transition: all .5s;
cursor: pointer;
}
.body-area {
padding: 10px 15px;
/* overflow: hidden; */
}
Add the following CSS:
.body-area {
position: relative;
z-index: 1;
background-color: white;
}
See the snippet below.
main {
width: 80%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 30px auto;
padding: 30px 0;
}
.single-box {
flex-direction: column;
align-self: center;
width: 270px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border-radius: 10px 10px 10px 10px;
margin: 30px 0;
overflow: hidden;
/* max-height: 100%; */
}
.header-area.img1 {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
object-fit: contain;
width: 100%;
}
.header-area {
background-size: cover;
/* padding: 100px 30px; */
height: 200px;
background-position: center center;
border-radius: 10px 10px 50% 0;
/* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
transform: scale(1);
transition: all .3s;
/* position: relative; */
/* max-height: 100%; */
/* overflow: hidden; */
}
.header-area.img1:hover {
transform: scale(1.3);
transition: all .5s;
cursor: pointer;
}
.body-area {
padding: 10px 15px;
/* overflow: hidden; */
}
.body-area {
position: relative;
z-index: 1;
background-color: white;
}
<div class="single-box">
<div class="header-area img1"></div>
<div class="body-area">
<h3>Banana</h3>
<p>
Lorem ipsum
</p>
</div>
</div>
Create a child div for header-area and place the image in it. Try like below code
html
<div class="header-area">
<div class="img1"></div>
</div>
CSS
.header-area {
background-size: cover;
height: 180px;
background-position: center center;
border-radius: 10px 10px 50% 0;
transform: scale(1);
transition: all .3s;
overflow: hidden;
}
.header-area .img1{
/* your image */
width:100%;
height:100%;
object-fit:content
}
.header-area .img1:hover {
transform: scale(1.3);
transition: all .5s;
cursor: pointer;
}
Don't forget to Set the width and height for the image to 100%
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;
}
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>
Here is the link to the codepen: https://codepen.io/asosnovsky/pen/eYZmroJ
I feel like this might just be a strange edge case of how the browser renders content (either that or I am going nuts not being able to figure out what's going on).
The Issue:
I am trying to fit my content into two boxes using flex-css, but whenever the width of the device is below 800px, the right box overflows. The issue goes away when I remove the "span" elements that are inside the right box, but I can't figure out what exactly is causing the overflow.
In the codepen above, I added a complete example of my code.
Some pictures
It overall looks like this (incorrect)
But should be like this (regardless of screen size)
Thank you for all the help in advance!
SCSS
#lobby {
width: 100%;
height: 100%;
}
#lobby-inner-wrap {
padding: 5px;
width: calc(100% - 5px);;
height: calc(100% - 5px);
#lobby-inner {
display: flex;
flex-direction: row;
#lobby-players {
max-width: 100%;
&--inner {
height: 100%;
margin: 5px;
padding: 5px;
box-shadow: 1px 1px 5px #0005;
}
max-width: 40vw;
min-width: 150px;
width: 200px;
&--list {
overflow: auto;
}
}
#lobby-settings {
flex: 1;
max-width: 100%;
&--inner {
overflow: auto;
}
&--inner-wrap {
height: 100%;
box-shadow: 1px 1px 5px #0005;
padding: 5px;
margin: 5px;
overflow: hidden;
}
}
}
}
.game-piece-hub {
display: flex;
flex-direction: column;
overflow: hidden;
&--container {
flex: 1;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
.game-piece {
flex: 0 0 150px;
margin-left: 5px;
margin-right: 5px;
}
}
}
$border-radius: 5%;
.game-piece {
color: #ff3366;
background-color: #212121;
width: fit-content;
box-shadow: 5px 5px 4px #777a;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
overflow: hidden;
position: relative;
&--inner {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
justify-content: center;
display: flex;
flex-direction: column;
overflow: hidden;
// max-width: 200px;
width: fit-content;
}
&--highlight {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
transition: opacity ease 500ms;
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #63636399;
font-size: 10em;
color: #f58a;
text-shadow: 2px 2px 2px #fff5;
&:hover {
opacity: 0.5;
background-color: #68526299;
}
&.enabled {
opacity: 1;
}
}
&--img {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
img {
max-width: 100%;
}
}
&--description {
&--wrap {
padding: 0;
white-space: nowrap;
display: flex;
flex-direction: row;
}
background-color: #363636;
overflow: hidden;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.game-piece--name {
margin-bottom: 0.25em;
margin-top: 0.5em;
font-size: 1em;
text-align: center;
max-height: 1.25em;
overflow: hidden;
}
.game-piece--type {
font-size: 0.75em;
margin-bottom: 1em;
color: black;
background-color: #68caa4;
padding: 0.5em;
border-radius: 4px;
}
}
}