I have 3 components in a row and I want their buttons be aligned at the bottom of containers. However each container has different text so it's height is not fixed and we don't want to strict the height.
How can I achieve alignment of the containers only by css and compatible with IE9 as well?
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.button-link{
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
http://codepen.io/neginbasiri/pen/mPYzKx
Same height is not necessary to make this done)
Just set position relative on outermost parent and set position: absolute with only bottom: 0 for your button without specifying left and right.
.container-of-3 {
position: relative;
padding-bottom: 40px;
overflow: hidden;
}
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.div-content {
text-align: center;
}
.button-holder {
width: 33.33333333333%;
position: absolute;
text-align: center;
bottom: 0;
}
.button-link{
background-color: #69be28;
display: inline-block;
vertical-align: top;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
You can use display: table for the container and display: table-cell for the three columns, this way they are all the same height. Then fix the button to the bottom and you're done :)
.container-of-3 {
display: table;
}
.container-of-3 > div{
width: 33.33333333333%;
display:table-cell;
height: 100%;
padding-bottom: 20px;
position: relative;
}
check out this fiddle: https://jsfiddle.net/br6c5way/
Floats will not really help you here since they don't match heights. You'll want to change the divs to a table table cell approach. Then position absolute the buttons so they are always aligned the same. Since Firefox 30 or so all browsers handle position relative on table cell elements. The positioning below aren't exact so you'll want to try out different amounts of padding and positioning that work for you.
.container-of-3 {
display:table;
table-layout: fixed;
width:100%
> div {
display: table-cell;
position: relative;
vertical-align:top;
padding-bottom:50px;
> img{
margin-left: calc((100% - 90px)/2);
}
}
}
.button-link{
position: absolute;
bottom: 10px;
left: 0;
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
Related
I was trying to make a chat UI with some actions that show in an overlay, but the buttons got chopped off. Here's what I tried to do:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
I'm looking for something that looks like a grid, and would get longer if more buttons were added.
If I set flex-direction to row instead, it works fine, but that makes the buttons not be stacked. If I remove overflow: hidden I can see the buttons outside of the overlay, instead of it staying inside of the box. If I set a width for the overlay, things work fine, but I want the width to be dynamic.
Is this what you are looking for?
What I did was made the parent container display: flex; so it will expand to the size of the child div .overlay, then simply made the overlay a grid with only 1 column in order to have the buttons in 1 column.
.parent {
position: relative;
background: #111;
color: white;
height: 100%;
display: flex;
}
.overlay {
background: purple;
display: grid;
grid-template-columns: 1fr;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
EDIT: ok maybe this is what you want?
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
OK last edit then im giving up if this isn't it:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
display: flex;
}
.overlay {
background: purple;
display: inline-block;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.'
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Try giving the parent a fixed height, based on the height of the buttons. For example if I try: height: 100px; then I can see the buttons just fine as a vertical grid to the right of the text.
#container{
display:flex;}
#x, #y{
display:flex;}
<div id='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
</div>
<div>
<div id='x'>
<button>
A
</button>
<button>
B
</button>
</div>
<div id='y'>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
</div>
Got this to work with grid:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Flex can do it.
Make three minor adjustments to your CSS code. (No changes to HTML.)
.parent {
position: relative;
/* overflow: hidden; */ /* 1 */
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
/* flex-direction: column; */ /* 2 */
flex-wrap: wrap;
}
button {
flex-basis: 50%; /* 3 */
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
im new at HTML, CSS and Bootstrap.
What im looking for is a way to make the navbar fixed only in a portion of the web.
A cleary example is this web:
http://pascalvangemert.nl/
You can see that the navbar starts at "Profile" section and doesnt go upper than that.
Is there a css or bootstrap way to do it?
Thanks
<body>
<div class="jumbotron intro">
<div class="container-fluid intro-image">
<div class="row">
<div class="col-lg-12">
<img src="/imagenes/fondo6.jpg" class="imagen">
<h1>Ariel Curuchaga</h1>
<hr class="dotted-line" style="border-top: dotted 5px">
<p class="intro-paragraph">Interactive Resume</p>
</img>
</div>
</div>
</div>
</div>
<div>
<nav id="navbar" class="navbar navbar-inverse barra" role="navigation">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-dark"><i class="fas fa-arrow-circle-up"></i>
</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Profile</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Experience</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Goals</li>
</ul>
</nav>
<div class="profile">
<h2>About Me</h2>
</div>
<div class="experience">
<h2>About Me</h2>
</div>
<div class="education">
<h2>About Me</h2>
</div>
<div class="goals">
<h2>About Me</h2>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.imagen {
height: 100vh;
width: 100vw;
margin: 0;
filter: opacity(0.4) drop-shadow(0 0 0 pink);
}
.intro {
position: relative;
margin: 0;
text-align: center;
}
.intro-image {
padding: 0;
}
h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-weight: 700;
font-size: 60px;
letter-spacing: 8px;
}
.dotted-line {
position: absolute;
width: 32%;
top: 50%;
left: 32%;
color: #6b6e6e;
margin: 0;
padding: 0;
}
.intro-paragraph {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-size: 30px;
}
.barra {
border-radius: 30%;
padding: 0;
opacity: 80%;
position: sticky;
top: 0;
z-index: -1;
}
.list-group {
text-align: center;
}
.profile {
background-color: yellowgreen;
height: 100vh;
width: 100vw;
}
You can use sticky positioning:
#navBar {
position: sticky;
top: /*distance from top of page*/
}
This makes the element in question follow normal page order until it is reached, then it becomes fixed. However, keep in mind that it is not supported by IE.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
How can I add this icon from fontawesome and put it over this picture?
I want it to be aligned in the center of the picture.
<i class="fas fa-play-circle"></i>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex border-bottom mb-1 mt-3">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#">
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
</body>
</html>
Problem is solved and responsive Design now is properly achieved.
You just update your CSS with the following Code
.img-box{
position: relative;
min-width: 100%;
height: 100%;
display: block;
}
.icon-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
min-height: 100%;
}
.icon-box i{
font-size: 29px;
color: #fff;
}
#media(max-width: 767px){
.main-box {
flex-direction: column;
align-items: center;
}
}
And update your HTML with following
<div class="d-flex border-bottom mb-1 mt-3 main-box">
<!-- Media -->
<ul class="list-unstyled video-list-thumbs row">
<li>
<a href="#" class="img-box">
<div class="icon-box">
<i class="fas fa-play-circle"></i>
</div>
<img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-responsive" height="130px" />
</a>
</li>
</ul>
<!-- Content -->
<div class="ml-2">
<h5 class="mb-0 ml-2">
Lesson 1 : Lorem ipsum dolor sit.
</h5>
<span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
<p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Abhijeet John Kujur.
</div>
I'm trying to layer the top row of cards on top of the header using z-index on a project using Materialize CSS. Since the cards are now using relative positioning, it causes some of them to move when the card-action is hovered upon (the result is less visible on mobile view since there's only one card per row). I also didn't intend on the card-action text moving to the center when hovered, though I'm okay with that effect. I've tried using absolute positioning as well as changing which element the positioning is applied to. How can I prevent the cards from shifting and still use z-index? Here is my code and link to my (codepen):
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #c31432;
--primary-text-color: rgba(0,0,0,0.5);
--primary-text: "Open Sans", sans-serif;
}
* {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
#works-header {
position: absolute;
height: 500px;
width: 100vw;
z-index: 10;
}
#works-header h1 {
font-size: 3rem;
letter-spacing: 1px;
margin: 0 auto;
}
#cards {
position: relative;
top: 400px;
z-index: 1000;
}
.card-image {
cursor: pointer;
transition: all .3s ease;
}
.card-image:hover {
border: 3px solid var(--primary-color);
opacity: 0.85;
}
.card-image:hover .card-title {
display: none;
}
.card-action {
width: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all .3s ease;
}
.card-action:hover {
width: 100%;
position: absolute; /* this prevents cards from shifting due to relative positioning on the card element */
opacity: 0.7;
border-bottom: 2px solid var(--primary-color);
}
.card-tags {
display: none;
}
.card-image:hover .card-tags {
display: block;
position: absolute;
left: 1rem;
bottom: 2rem;
letter-spacing: 2px;
font-weight: 300;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!-- Todos: fix all cards aligned on the right side (card-action does not work properly) -->
<section class="center" id="works">
<div id="works-header" class="black valign-wrapper">
<h1 class="white-text center-align">Check out some of my latest projects</h1>
<p></p>
</div>
<div class="container row" id="cards">
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
<div class="col s12 m6 l4">
<div class="card z-depth-3">
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
</div>
<div class="card-content flow-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nesciunt repellat consequatur autem! Laboriosam dignissimos rerum eum ea cum quibusdam!</p>
</div>
<div class="card-action">
View project
</div>
</div>
</div>
</div>
</div>
</section>
One solution is to add a border to card-image, so that you are transitioning just the opacity and color, and not the border size (which in turn recalculates the size of the image and causes the flicker). It's a lot for the browser to process all at once.
.card-image {
cursor: pointer;
transition: all .3s ease;
border: 3px solid black;
}
Codepen.
EDIT:
Sorry, I realised there were two issues.
Ok so you don't need absolute positioning on the header - absolute takes items out of the flow of the page. No need to do that here. Take off the relative from the cards and use a negative margin:
#cards {
top: 400px;
z-index: 1000;
margin-top: -100px;
}
I've removed the absolute positioning from the hover as it's not a good idea. Absolute positioning comes into it's own when you need to finely control an elements positioning. No need for that here. I've also taken the 50% width off and added a default border to prevent flicker on the card action.
The main reason it's happening - because of the border on hover. If you really need this look - add empty div inside card-image and add inset box-shadow for it.
<div class="card-image">
<img src="https://i.imgur.com/vxaE0nK.png">
<span class="card-tags white-text">HTML, CSS, Javascript</span>
<span class="card-title white-text">Netflix Clone</span>
<div class="hover-shadow"></div>
</div>
and for CSS:
.card-image .hover-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-image:hover .hover-shadow {
box-shadow: inset 0 0 0 2px (--primary-color);
}
Full example at codepen
I am new here.
I am banging my heads on the keyboard as I spent the last 2 hours trying to solve this problem:
ASSETS: I have a page where I list services using an image on the left, and text on the right. Except... the following service has text on the left and image on the right, so the page looks a little bit like a chequer board. IMAGE-TEXT / TEXT-IMAGE / IMAGE-TEXT.. you get the idea. I used tables to do that. one table and one row per service, two columns for each row.
This is great on desktop; the problem is that when on mobile, my trusty responsive tables act this way: they always put the left column on top of the right column, ignoring the content. The result is that I have IMAGE then TEXT than TEXT then IMAGE etc.., which is confusing when scrolling down on mobiles. We don't know what image relates to what because you would expect a different behaviour: you would want to see IMAGE, then TEXT, then IMAGE, then TEXT etc...
I haven't found any solution to this on the web, possibly because I can't synthesise properly my question in Google! So I thought I asked you. Please any comment and approach to this kind of problem is welcome!
Here's my CSS and HTML:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before{
display:block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
My approach to this is to use display: flex.
Display your DIVs in flex mode and add a class to the second paragraph to force it to the top, like this:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before {
display:flex;
-webkit-display:flex;
-moz-display:flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
.col-floated {
order: -1;
-webkit-order: -1;
-moz-order: -1;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services col-floated">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>