Trying to scale a card beyond the size of its parent and other divs without success.
Once you hover a card, this should scale up taking part of the height of the screen. The results that i got so far or make a mess having the card scaled in a fix position and being very unstable or having a good escalation but not full visible.
Any idea how to tackle this?
.iZNdlS {
z-index: 200;
position: relative;
flex-direction: column;
background-color: rgb(255, 255, 255);
border-radius: 4px;
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
flex-shrink: 0;
min-width: 300px;
max-width: 300px;
min-height: 490px;
max-height: 490px;
transition: transform 0.7s ease 0s;
transform-origin: center top 0px;
}
CodePudding user response：
If you want to scale only image when hovering over the card:
HTML:
<div >
<div >
<img src="https://loremflickr.com/cache/resized/65535_51923601496_2649a4c0ce_320_240_nofilter.jpg" alt="my-cat">
</div>
<div >
<h3>My Cat</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit ut repellendus veniam, etcorrupti iusto sequi repellat pariatur commodi est iure repudiandae?</p>
</div>
</div>
CSS:
.card {
background: #FFF;
width: 300px;
height: auto;
overflow: hidden;
border-radius: 8px;
}
.card__image-holder {
width: 100%;
overflow: hidden;
}
.card__image-holder img {
width: 100%;
height: auto;
display: block;
margin: 0;
transition: transform 0.4s;
}
.card__content {
padding: 0 20px 20px;
}
.card:hover .card__image-holder img {
transform: scale(1.2);
}
The key is to add wrapper around image and overflow: hidden; to that wrapper, so image don't scale outside the wrapper, than apply transform of image on card hover.
Here is jsfiddle: https://jsfiddle.net/g7256y1a/1/
CodePudding user response：
Please go over your question before you post it, as you might catch mistakes that would have otherwise confused people trying to answer your question. While I was trying to read the question, I found it very unclear and I even found parts of the sentence completely missing. But from what I understand you are trying to make a card scale to a size greater than its parent element. If this is the case the code is below.
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
}
.card {
display: inline-block;
margin: 10px;
width: 300px;
height: 450px;
background-color: white;
border: 1px solid black;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
overflow: hidden;
transition: .2s;
}
.card:hover {
transform: scale(1.3);
}
.image {
width: 300px;
height: 300px;
margin-bottom: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div >
<div >
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" \>
<span>Cat</span>
</div>
<div >
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" \>
<span>Cat</span>
</div>
<br>
<div >
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" \>
<span>Cat</span>
</div>
<div >
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" \>
<span>Cat</span>
</div>
</div>
</body>
</html>I think the reason your scale isn't working is because the parent has overflow: hidden which will make any content beyond the parents border disappear, however I don't know if this is the case because your CSS is ridiculously long and I don't have time to go through every line of code to check for a property. Hope this helps!