When hover on card how to scale card image without overlapping - html

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

Image hover effects spills over

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;
}

Resizing div before parent

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.

Issue with positioning arrow indicators at the right place

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>

How to style a blurred, centered and responsive box for a login form with full size background?

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

Issue with backdrop-filter

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;
}