Bootstrap cards overlapping
You have a fixed column width of 25% but then you're telling the cards to be 18rem (inline). Remove the column width and just set the cards to the size you want in your actual card class rather than inline.
I didn't want to re-write your entire project, but I'd suggest looking into Bootstraps flex containers over using floats (hence the sticking to the left) so you can get everything to line up better and have more control and not have to worry about elements shifting when the screen size changes
https://getbootstrap.com/docs/5.0/utilities/flex/
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.email-background {
background-color: lightgrey;
font-family: sans-serif;
padding: 20px 5px 50px 5px;
width: 100%;
}
.email-container {
background-color: #ffff;
max-width: 680px;
margin: 0 auto;
padding-bottom: 40px;
border-radius: 15px;
padding-top: 25px;
}
/*
.features .smaller-text{
font-size: smaller;
display: inline-block;
}
*/
.price {
color: turquoise;
}
/*
.icon-case{
height: 1em;
width: 1em;
float: left;
}
*/
.view-btn {
background-color: #0fbd9a;
color: #fff;
padding: 15px 20px;
text-decoration: none;
border-radius: 15px;
float: right;
}
/* Float four columns side by side */
.email-column {
float: left;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.email-row {
margin: 0 -5px;
padding-top: 25px;
}
/* Clear floats after the columns */
.email-row::after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 680px) {
.email-column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 26px;
text-align: left;
background-color: #f1f1f1;
width: 18rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>SkyScanner Test</title>
</head>
<body>
<div class="email-background">
<div class="email-container">
<p class="car-titles"><strong>Check out these sweet rides</strong></p>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 1</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 2</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View <img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
<div class="email-row">
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 3</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
<div class="email-column">
<div class="card">
<img src="/assets/economy.png" class="card-img-top" alt="Car Pic">
<div class="card-body">
<h5 class="card-title">Car 4</h5>
<h6>2-3 Doors</h6>
<div class="features">
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/original.png">4 Seats</small></h6>
<h6 class="smaller-text"><small><img class="icon-case" src="/assets/suitcase.png">2</small></h6>
</div>
<div class="pricing-text">
<h6 class="smaller-text"><small>from</small></h6>
<h6><strong class="price">£33</strong><small> per day</small></h6>
</div>
<a class="view-btn" href="#">View<img src="/assets/arrow.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Scale Image to fit card and not overlap title
Popshuvit is correct. Also, align-self is a flex property but there is no flex-parent to give this context. You should take the flex route though. I have not tested, but the result you want will probably look like this:
.card {
position: relative;
display: flex;
flex-flow: column;
text-align: center;
align-items: center;
width: 100%;
}
.card-img {
width: 100%;
object-fit: contain;
}
.card-title {
...text styles
}
Additionally, you seem to have separate styles for .card and .card-column when they are actually the same element. This would only make sense if some of the 'cards' did not include the .card-column class. Continuing down the flex route will also allow yuo to get rid of those pesky floats!
Make flex items overlap
Here's how I'd do this using flexbox.
.cards { display: flex; align-content: center; max-width: 35em;}
.cardWrapper { overflow: hidden;}
.cardWrapper:last-child, .cardWrapper:hover { overflow: visible;}
.card { width: 10em; min-width: 10em; height: 6em; border-radius: 0.5em; border: solid #666 1px; background-color: #ccc; padding: 0.25em; display: flex; flex-direction: column; justify-content: center; align-items: center;}<div class="cards"> <div class="cardWrapper"> <div class="card">card 1 blah blah blah</div> </div> <div class="cardWrapper"> <div class="card">card 2 blah blah blah</div> </div> <div class="cardWrapper"> <div class="card">card 3 blah blah blah</div> </div> <div class="cardWrapper"> <div class="card">card 4 blah blah blah</div> </div> <div class="cardWrapper"> <div class="card">card 5 blah blah blah</div> </div></div>CSS 3d transform animates under other elements in webkit only
A possible solution is to set the z-index on the parent container, when a card is flipped, like:
.box.flip.active {
z-index: 1;
}
Remove this class from all elements and add it to the current card before you flip it either way. This works in Safari as well as in Chrome.
Demo
Try before buy
The demo includes the updated JavaScript code too. This is not optimized. It's only to demonstrate the behavior:
$(".flip .flip-button").on("click", function() {
$('.col4').removeClass('active');
$(this).closest(".col4").addClass('active');
$(this).closest(".card").addClass("flipped");
});
$(".flip .close").on("click", function() {
$('.col4').removeClass('active');
$(this).closest(".col4").addClass('active');
$(this).closest(".card").removeClass("flipped");
});
I'm trying to position the image card to overlay the card top border using bootstrap, need help . or I can do it only with CSS?
This can be done with the following classes position-absolute top-0 start-50 translate-middle which will position the middle of the element 0 from top, centered left to right. https://getbootstrap.com/docs/5.2/utilities/position/#center-elements
Here is an example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/200" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="Sample Image">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/199/200" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="Sample Image">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/198" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="Sample Image">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-5">
<div class="card mt-5 pt-5">
<img src="https://www.fillmurray.com/200/199" class="rounded-circle w-50 position-absolute top-0 start-50 translate-middle" alt="Sample Image">
<div class="card-body text-center pt-5">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</div>Related Topics
Cannot Get CSS to Work in Itextsharp (5.4.3) When Making Pdf
Style The Tawk.To Chat Widget with My Custom CSS
Postcss - Color Function Plugin - "Unable to Parse Color from String"
Highlight Div1 and Div2 on Div2 Mousover, Highlight Nothing on Div1 Mouseover
Custom Fonts Not Rendering in Chrome/Safari
Image and Color Overlay on Hover
CSS: Creating Textured Backgrounds
How to Center Font Awesome Icons Horizontally
Twitter Bootstrap 3 Modal with Scrollable Body
Writing Flexbox Code for 2-Column and 3-Column on Desktop and Mobile (Wrap)
Overriding Overflow-X CSS Property on iOS
How to Use Nth-Child Correctly
Is There a Way in CSS to Move an Element in The Dom
Auto Grid Columns, Without Wrapping to Next Row
How to Add a Top and Bottom Shadow While Scrolling But Only When Needed
HTML Formatted Email Not Showing Up at All in Gmail But Is in Other Mail Clients