I'm currently working on Cards from Bootstrap.
Depending on the text title I will get the different height for the cards and would like to have the same height as the tallest one.
I don't mind using JS I actually think is probably the best way to approach the problem.
I have tried using different solutions from the CSS like using flexbox.
The rendered HTML as it is rendered dynamically here's a simple example:
.card {
float: left;
width: 100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);
}
.card>img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SMITE FR</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/album.css" rel="stylesheet">
<link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<link rel="import" href="navigation.html">
</head>
<body>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The Bootstrap 4 columns already use flexbox so they are the same height. Just use h-100 for height:100% on the cards and they'll fill the columns...
https://codeply.com/go/hKhPuxoovH
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card h-100">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
Also there is no reason to float the cards, and the .col-* should be directly in the .row, not .card-deck
Use card-deck for equal size card this below code works for me
<div class="card-deck">
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-2">
<img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Reference you can find here
As far as I know not doable without either javascript or flexbox (https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback)
Use flex for get it below an example
.main {
display: flex;
}
.child {
flex:1;
border:1px solid tomato;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: column nowrap;
}
.content-child{
padding: 5px;
}
<div class="main">
<div class="child">
<div class="content">
<div class="content-child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content-child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="child"></div>
</div>
Try giving height to card see this fiddle
.card {
float: left;
width: 100%;
padding: .75rem;
height:80vh;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
Using Flexbox you got the equal height of the card
.card-deck {
display:flex;
flex-wrap: wrap;
}
.card {
float: left;
width: 100%;
height:100%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}
.card > img {
margin-bottom: .75rem;
display: block;
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.card-text {
font-size: 85%;
}
#media (max-width:767px){
.card-deck {
display:block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="card-deck">
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="BeatsX">
<h1 class="card-title">BeatsX</h1>
<div class="text-center">
<p>1188.0000</p>
<p>2017-06-09 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
<h1 class="card-title">Nitendo Switch</h1>
<div class="text-center">
<p>2899.0000</p>
<p>2017-06-10 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="card">
<img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
<h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
<div class="text-center">
<p>6388.0000</p>
<p>2017-06-06 10:00:00</p>
Voir la Fiche
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<!--YOUR CARD HERE-->
</div>
</div>
</div>
Related
Hi Im relatively new to html and need some help
Im coding my profile on a site where CSS is a premium option so I can only use html
I keep running in to the same problem where I can't display two card classes (both of which I use for an info box on my profile) side by side
I'm always able to get the first one exactly where I want it but the second one gets stuck underneath and I want them aligned horizontally
Any pointers?
It always ends up looking something like this
<div class="container m-3 p-3" style="background-color: black; max-width: 950px; border-radius: 5px;">
<div class="container m-3 p-3" style="background: url('BG_IMG'); background-size: cover; #292929; max-width: 885px; border-radius: 5px;"
<div class="p-2 col-sm-4">
<center><img src="IMG_LINK"max-width: 200px; border-radius: 5px"></center>
<div class="card p-2 my-3 text-center">
<h1 class="m-0"><b>NAME</b></h1>
<p><b>SUBTITLE</b></p>
</div>
<div class="col-sm-8">
<div class="card">
<h class="m-3" style="height: auto; text-indent: 20px;"></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="col">
<div class="p-2 col-sm-4">
<div class= "p-2 card">
<h3 class="m-1 text-center">INTERESTS</h3>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<div class="mx-n1 text-center my-auto">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-2" style="background: light; height: 1px;">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<p class="m-1">CONENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<p class="m-1">CONTENT</p>
</div>
</div>
</div>
</div>
</div>
</div>
A couple of things:
A good thing to do in general is to proof read your code thoroughly, especially if something isn't working. It's annoying to do by hand, that's why I'd recommend using a text editor that does it for you. I personally use VS-code with Prettier for formatting, I'd start there if you don't have your own specific preferences. That's how I directly found a dozen syntax errors. Then if you want, you can just copy-paste it wherever after correcting the errors.
I assume you're using Bootstrap, since you're using their class names. HTML in itself has barely any styling possibilities, except for inline-css (like this: style="background-color: #FFFFFF;"). For layout, checkout their grid system.
Like someone already commented, a site that has css as a premium option probably isn't a site you want to be using. But if you have no other alternative, I made a version of this on codeply (using Bootstrap 5, not sure about which version your site uses, they are similar but not identical). I think this is something like what you're trying to achieve. I made some quite heavy changes on the markup, you'll have to fix the more exact layout yourself, I don't know exactly what you're trying to do, and I don't have the pictures.
Edit: here's the code I put on codeply:
<div class="container" style="background-color: black; max-width: 950px; border-radius: 5px;">
<div class="row m-3 p-3"
style="background: url('BG_IMG'); background-size: cover; background-color:#292929; max-width: 885px; border-radius: 5px;">
<div class="col-12">
<div class="card">
<img src="IMG_LINK" class="card-img-top" style: "max-width: 200px; border-radius: 5px">
<h1 class="card-title text-center">NAME</h1>
<p class="card-text fw-bold text-center">SUBTITLE</p>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="card">
<h3 class="card-title m-3">Title?</h3>
<p class="card-text m-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="col-4">
<div class="card">
<h3 class="card-title m-3">INTERESTS</h3>
<ul class="list-group">
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONENT</li>
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONTENT</li>
</ul>
</div>
</div>
</div>
</div>
I have a basic bootstrap container that has a fluid width. I want to be able to align three rows inside a sidebar to sit at the top, middle and bottom (much like this demo in the bootstrap documentation, but as a sidebar instead of full-width).
From what I can tell from other posts I've read this works with a fixed height, but not a fluid one (i.e. height 100%) - I need the sidebar and the content to both be the full height of the page. Then vertically align within that. However this doesn't seem to be possible. I was wondering if anyone knew a work around for this using bootstrap - it seem like it's something so commonly seen on the web these days that surely there must be a way of achieving it?
I've not added any custom CSS - all I'm attempting this with a classes available in Bootstrap (but I'm happy to create custom classes if required)
<div class="container-fluid h-100">
<div class="row h-100">
<div id="content" class="col-8 h-100">
<p>Some Content</p>
</div>
<div id="sidebar" class="col-4 h-100">
<div id="logo" class="row align-items-start">
<div class="col text-center">
<p>Test Top</p>
</div>
</div>
<div id="helpful-info" class="row align-items-center">
<div class="col text-center">
<p>Test Middle</p>
</div>
</div>
<div id="side-footer" class="row align-items-end">
<div class="col text-center">
<p>Test Bottom</p>
</div>
</div>
</div>
</div>
</div>
I think you’ll need some custom classes for the sidebar section to keep it in place. Beyond that, you just need to setup the sidebar as d-flex flex-column justify-content-between and the divisions should spread out the full height. The sidebar height is set by calculating the viewport height minus the height of the navbar.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 40px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
</style>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand mr-0" href="#">Site name</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<main class="col-8 mr-auto" style="height: 200vh;">
<h2>Content Area</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</main>
<nav class="col-4 d-block bg-light sidebar">
<div class="sidebar-sticky d-flex flex-column justify-content-between">
<div id="logo" class="row">
<div class="col text-center">
<h6>Top Section</h6>
</div>
</div>
<div id="helpful-info" class="row">
<div class="col text-center">
<h6>Middle Section</h6>
</div>
</div>
<div id="side-footer" class="row">
<div class="col text-center">
<h6>Bottom Section</h6>
</div>
</div>
</div>
</nav>
</div>
</div>
So I have been doing bootstrap for around a month, and so my HTML might be a bit messy. The background of the issue is that my task requires me to create a custom slick carousel to achieve a UI look like the one below:
With my current code this is what i am able to achieve:
Here is my html for what I have achieved so far:
.slider-left {
display: flex;
align-items: center;
p {
font-size: 16px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
}
.slider-middle {
display: flex;
align-items: center;
word-break: break-word;
h1 {
font-weight: bold;
color: blue;
}
h2 {
text-transform: uppercase;
font-style: italic;
font-size: 16px;
font-weight: normal;
}
}
.v-center {
width: 500px;
height: 1000px;
display: flex;
align-items: center;
}
.slider-image {
width: 100%;
}
.slider-right {
padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<!-- Left most text -->
<div class="col-lg-1 slider-left text-right">
<div class="container center-align">
<p>Publication</p>
</div>
</div>
<!-- Middle Text -->
<div class="col-md-4 slider-middle center-align">
<div class="container">
<h2>title2</h2>
<h1>title1</h1>
<p>hsdajflaflasdfldsfhlsadfhlsdjfsdljflsjdfsjlfalsjfhjlasfhlsflasfhalfhlasfdsjfdsjlfadsljfhslajfalsjfljsflajflaflajsfdjlafhghurthruhffnfjgjrgbhrturhtadsofadflnvfnilawieoil</p>
<a></a>
</div>
</div>
<!-- Carousel Image -->
<div class="col-md-7 slider-right">
<img class="slider-image" src="<?php bloginfo('template_directory'); ?>/assets/images/image1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-5 slider-nav">
<p>navigation</p>
</div>
</div>
</div>
I am required to use bootstrap to achieve any kind of ui design because my supervisor says it helps for the responsiveness of the website. What happens here is that the whole container is moved for a similar container over and over. Please let me know what to do and any explanation would be a great help. Apart from that if anyone knows how to insert custom buttons and custom pagination in that navigation bar can let me know, I would really appreciate it, though I haven't looked much into it.
Cheers :)
Do you mean something like this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-4" style="background:#f2f2f2;">
Publication
</div>
<div class="col-sm-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="row">
<div class="col-sm-12" style="background:red;">navigation</div>
</div>
</div>
<div class="col-md-6 col-sm-12" style="background:#999;">
Image
</div>
</div>
</div>
I want to create a card that contains an image slideshow, with an accompanying description div on the side. I was trying to get the description div to fill up to the same height as the image beside it.
Currently, the description div simply takes up as much height as its contents require, but I want it to expand to fill the parent div.
I tried applying flex-grow and setting style="flex: 1 1 auto" to the flex-column div but it doesn't seem to be changing anything.
I found a few posts addressing having rows filling the height of a parent div but none for columns.
I'm currently using w-100 as well, to have the column fill the remaining width of the parent div, but for some reason h-100 doesn't seem to work the same way.
HTML with Bootstrap 4.1.1 min.css:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-4 box-shadow">
<div class="flex-row card-body d-flex flex-fill align-items-center">
<!-- Description Div -->
<div class="flex-column d-flex w-100 flex-fill align-items-end showborder">
<div class="p-2 ">
<!-- Project Title -->
<strong class="p-2 ">Title Text</strong>
<!-- GitHub Link -->
</div>
<div class="p-2 w-100 ">
<!-- Project Description -->
<p>
Description text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="mt-auto p-2 ">
<!-- Link to Project -->
<a class="btn btn-primary btn-sm" href="#">Check it out</a>
</div>
</div>
<!-- Image Carousel -->
<div class="carousel slide showborder" data-ride="carousel">
<div class="carousel-inner ">
<div class="carousel-item active">
<img class="d-block w-100 " src="res/testimg1.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100 " src="res/testimg2.jpg">
</div>
</div>
</div>
</div>
</div>
If you just want the height of the text column to fill parent row height you can just add to it self-align:stretch.
See this in action: https://codepen.io/matteopieroni/pen/MXdGja
Then you will have to make adjustments in the column children to get the look you are after!
If this can be of your any help.
This align image beside the card.
Here is the fiddle - http://jsfiddle.net/ctudb8o6/
<div class="container">
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card">
<img class="card-img-left" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164697f30e4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164697f30e4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.271875%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
</div>
</div>
</div>
</div>
I'm trying to get two background images on a DIV to animate with two different opacity but it doesn't seem to work. I'm willing to accept a jQuery or JS solution if it's easier to have the same result. I just need to make sure the background's animation doesn't effect the foreground text and images.
CSS:
/*Header*/
.navbar-default .navbar-nav>li>a {
color: #777;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover{
color: #f74d65;
}
header{
background: url(../images/header_bg_2.png), url(../images/header_bg_1.png);
background-size: cover;
background-repeat: no-repeat;
animation-name: animateheader;
animation-duration: .6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#-webkit-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#-moz-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#-o-keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
#keyframes animateheader {
0% {
opacity: 1, opacity: 0 ;
}
30% {
opacity: .3, opacity: 1 ;
}
50% {
opacity: 0, opacity: 1 ;
}
100% {
opacity: 1, opacity: 1 ;
}
}
.section_overlay{
background: url(../images/header_bg_2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50px;
}
.home_text{
padding-top: 210px;
padding-bottom: 730px;
}
.home_text h2{
color: #010101;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 13px;
}
.home_text p{
color: #404040;
font-size: 14px;
text-transform: uppercase;
}
.home_text img{}
.scroll_down{
padding-bottom: 50px;
}
.scroll_down h4{
font-size: 12px;
color: #000;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.section_overlay {
height: 100%;
background: url('../images/header_bg_2.png');
background-size: cover;
background-repeat: no-repeat;
}
HTML:
<!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">
<title>MrCreeep - Let's Make it Creepy!</title>
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Preloader -->
<link rel="stylesheet" href="css/preloader.css" type="text/css" media="screen, print"/>
<!-- Icon Font-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<!-- Animate CSS-->
<link rel="stylesheet" href="css/animate.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Style -->
<link href="css/style.css" rel="stylesheet">
<!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/lte-ie7.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<header id="HOME" style="background-position: 50% 50px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Testimonial</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="home_text wow fadeInUp animated">
<h2>it’s MrCreeep</h2>
<p>Tag Line would go Here</p>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
</header>
<section class="about_us_area" id="ABOUT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="about_title">
<h2>About Me</h2>
<img src="images/shape.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed quia non numquam eius modi tempora.</p>
</div>
<div class="col-md-4 wow fadeInRight animated">
<p class="about_us_p">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
</section>
<section class="testimonial text-center wow fadeInUp animated" id="TESTIMONIAL">
<div class="container">
<div class="icon">
<i class="icon-quote"></i>
</div>
<div class="owl-carousel">
<div class="single_testimonial text-center wow fadeInUp animated">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores<br/> eos qui ratione voluptatem sequi nesciunt.</p>
<h4>-JOHN DOE</h4>
</div>
<div class="single_testimonial text-center">
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius<br/> modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<h4>-JOHN SMITH</h4>
</div>
</div>
</div>
</section>
<div class="fun_facts">
<section class="header parallax home-parallax page" id="fun_facts" style="background-position: 50% -150px;">
<div class="container">
<div class="row">
<div class="col-md-6 wow fadeInLeft animated">
<div class="row">
<div class="col-md-4">
<div class="single_count">
<i class="glyphicon glyphicon-play"></i>
<h3><a class="ltwitch" href="http://www.twitch.tv/mrcreeep" data-tnick="mrcreeep">MrCreeep</a> (<span>...</span>)</h3>
<p>Watch Me Live</p>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-1 wow fadeInRight animated">
<div class="imac">
<img src="images/imac.png" alt="">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="work_area" id="WORK">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work_title wow fadeInUp animated">
<h1>Latest Works</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <br> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
<div class="row pad_top">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w4.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w5.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image last_padding">
<img src="images/w6.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>drawing</h2>
<h4>with pencil colors</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="CONTACT">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="contact_title wow fadeInUp animated">
<h1>get in touch</h1>
<img src="images/shape.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna<br/> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 wow fadeInLeft animated">
<div class="single_contact_info">
<h2>Call Me</h2>
<p>+88 00 123 456 01</p>
</div>
<div class="single_contact_info">
<h2>Email Me</h2>
<p>Hello#abdullahnoman.com</p>
</div>
<div class="single_contact_info">
<h2>Address</h2>
<p>216 Street Address, Barisal, BD</p>
</div>
</div>
<div class="col-md-9 wow fadeInRight animated">
<form class="contact-form" action="">
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="name" placeholder="Name">
<input type="email" class="form-control" id="email" placeholder="Email">
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="col-md-6">
<textarea class="form-control" id="message" rows="25" cols="10" placeholder=" Message Texts..."></textarea>
<button type="button" class="btn btn-default submit-btn form_submit">SEND MESSAGE</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="work-with wow fadeInUp animated">
<h3>looking forward to hearing from you!</h3>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="footer_logo wow fadeInUp animated">
<img src="images/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center wow fadeInUp animated">
<div class="social">
<h2>Follow Me on Here</h2>
<ul class="icon_list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-dribbble"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="copyright_text wow fadeInUp animated">
<p>© MrCreeep 2015.All Right Reserved By MrCreeep</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- =========================
SCRIPTS
============================== -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Website: mrcreep.com
Images:
http://mrcreeep/images/header_bg_1.png
http://mrcreeep/images/header_bg_2.png
A couple of pseudo elements would be optimal and opacity can be used on those.
.wrap {
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
color: red;
margin: 1em auto;
border: 1px solid grey;
text-shadow: 0px 0px 4px white;
position: relative;
}
.wrap::before,
.wrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.wrap::before {
background-image: url(http://www.queness.com/resources/images/png/apple_ex.png);
z-index: -2;
-webkit-animation: animateheader 3s infinite;
animation: animateheader 3s infinite;
}
.wrap::after {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png);
z-index: -1;
-webkit-animation: animateheader 5s infinite;
animation: animateheader 5s infinite;
}
#-webkit-keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes animateheader {
0% {
opacity: 1;
}
30% {
opacity: .3;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrap">
<h2>Heading</h2>
</div>