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%
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;
}
When I resize the page the searchbox starts resizing after the padding of the parent if zero. I want to resize the div with class-"searchbox", with resizing the page not after the parent's padding is off. Here is the code I'll be glad if you correct me anywhere.
.site-wrapper {
max-width: 86.5rem;
min-height: 28rem;
padding: 0 4.3rem;
margin: 0 auto;
overflow: hidden;
}
.navbar {
display: flex;
justify-content: end;
padding-top: 2.7rem;
}
#hamburger-button {
position: relative;
width: 32px;
height: 32px;
border-radius: 4px;
cursor: pointer;
}
#hamburger-button:hover {
background-color: #0000001f;
}
#hamburger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
background-color: transparent;
background-image: url(/assets/menuicon.svg);
background-repeat: no-repeat;
background-size: contain;
padding: 9.2px;
margin: 0 auto;
cursor: pointer;
}
.header-content {
margin: 0 auto;
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-content-logo {
margin-top: 5rem;
margin-bottom: 2.3rem;
}
.header-content-logo svg {
width: 12.6rem;
}
.searchbox {
display: flex;
align-items: center;
border-radius: 6px;
width: 100%;
max-width: 38.7rem;
height: 2.7rem;
background-color: #fff;
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.searchbox:hover {
box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.1);
}
.searchbox input {
width: 92%;
border: none;
background-color: transparent;
font-size: 11.8pt;
font-family: inherit;
padding-left: 1rem;
}
.searchbox input:focus {
outline: none;
}
<div class="site-wrapper">
<div class="navbar">
<div id="hamburger-button">
<button id="hamburger"></button>
</div>
</div>
<div class="header-content">
<div class="header-content-logo">
<svg>
</div>
<div class="searchbox">
<input type="text" placeholder="Search without being tracked">
</div>
</div>
</div>
I have tried putting margin and even making another div before it and putting padding but seems that it didn't make it work. I am out of options.
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>
I have tried to build a login form on a HTML page (Angular) that has a full size, centered background image and the form is placed in a div with blurred background, that is centered in the x- and y-axis of the browser window.
That is how far I came: https://codepen.io/surfermicha/pen/ZwpxBa
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
Unfortunately i have some issues with that:
The centered box isn't exactly in the center
It's not responsive. The div is to small at small devices. I want 10px margin left and right, but a max-width 500px on bigger screens.
Could anyone help edit the codepen for a working responsive solution
You can set media queries by your needs, like I set into 567px because after 567px view of your center block, don't look nice so I set into 567px.
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100%;
margin: 0;
height: 100%;
overflow-x: hidden;
}
.aero-background::before {
content: '';
background: url("http://placekitten.com/2400/2000") center no-repeat;
filter: blur(6px);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
align-items: center;
justify-content: center;
text-shadow: 0 0 10px black;
}
.centered {
max-width: 500px;
min-height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-background-door2 {
background: url("http://placekitten.com/2400/2000") center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
}
#media screen and (max-width: 567px) {
.centered {
width: 250px;
}
}
<div class="login-background-door2">
<div class="aero-background centered">
<h3>Here will be a login form later</h3>
</div>
</div>
https://codepen.io/anon/pen/MLjXgW
Centered with flex, no media queries
body, html {
font-family: "roboto", monospace;
color: #EEE;
padding: 0;
width: 100vw;
margin: 0;
height: 100vh;
overflow-x: hidden;
}
$login-background-image: "http://placekitten.com/2400/2000";
.aero-background::before{
content: '';
background: url($login-background-image) center no-repeat;
filter: blur(6px);
position: absolute;
left:0; top:0; right:0; bottom:0;
z-index: -1;
pointer-events: none;
}
.aero-background {
border-radius:5px;
box-shadow: 0 0 15px rgba(black, .4);
border:1px solid rgba(white,.1);
color: white;
align-items: center;
justify-content: center;
text-shadow:0 0 10px black;
max-width:500px;
min-height: 300px;
margin-left: 10px;
margin-right: 10px;
display: flex;
text-align: center;
padding: 10px;
}
.login-background-door2 {
background: url($login-background-image) center no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<div class="login-background-door2">
<div class="aero-background">
<h3>Here will be a login form later</h3>
</div>
</div>
My first time answering so I apologize if missed something
Ihave an issue with the backdrop-filter property, because the filter i added in my backdrop-filter do nothing and i don't understand why.
Here is my code :
.army_selection
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection:hover :nth-child(1)
{
opacity: 1;
-webkit-backdrop-filter: brightness(25%);
transition: 0.1s;
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
That property is experimental and has limited support.
MDN reference
To use in Chrome v.47 you need to Enable Experimental Web Platform Features.
Consider carefully the limited support; it is possible to achieve the same effect without this specific property. An example workaround.
I think you are trying to accomplish something like this?
Here's a workaround, maybe it's not what you are looking for, hope it helps
.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0, 0.25);
}
<div id="army1" class="army_selection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
.army_selection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
opacity:-2;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .5s;
}
.army_selection:hover {
background-color: rgb(0, 0, 0.8, 0.25);
}
<div id="army1" class="amySelection">
<div class="army_selection_bloc">
<p class="army_text">Ultramarines</p>
</div>
</div>
.armySelection {
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
background-color: rgba(0,0,0,0);
background-size: cover;
background-position: center;
transition: background-color .2s;
}
.armySelection:hover {
background-color: rgb(0, 0, 0, 0.25);
}
I found a solution but it's maybe be not the cleanest one
HTML part :
<div class="army_selection_bloc">
<div id="army1" class="army_selection"></div>
<div class="army_text_bloc">
<p class="army_text">Space marines</p>
</div>
</div>
Css part :
.army_selection_bloc
{
margin: 20px;
margin-left: 10px;
margin-right: 10px;
min-width: 300px;
max-width: 300px;
height: 400px;
}
.army_selection
{
z-index: 2;
position: relative;
top: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: 0.1s;
}
.army_selection_bloc:hover .army_selection
{
box-shadow: 7px 7px 60px black;
filter: brightness(25%);
transition: 0.1s;
}
.army_selection_bloc:hover .army_text_bloc
{
opacity: 1;
transition: 0.2s;
}
.army_text_bloc
{
z-index: 3;
position: relative;
top: -400px;
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.2s;
}