I have some problem with position absolute with inline elements.
For example:
.text {
position: relative;
}
.element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="text">Proin porttitor sapien vitae felis maximus, in molestie sem egestas. Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus.<span class="element"></span></span> Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet
Result:
Need to get something like this:
The black line must be an HTML element.
Please, help me.
The only other way i can think of is to double up the markup and align them on top of each other then cover the portion you want.
[container] {
position: relative;
animation: alter 5s linear infinite alternate;
width: 200px;
height: 200px;
}
[text],
[mask] {
padding: 10px;
border: 1px solid;
display: inline-block;
}
[mask] {
position: absolute;
left: 0;
top: 0;
color: #d9020200;
}
[mask]>[cover] {
background: black;
}
#keyframes alter {
to {
width: 400px;
height: 400px;
}
<div container>
<span text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
</span>
<span mask>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus veritatis, corporis eos aperiam ex eum <span cover>corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>Necessitatibus
veritatis, corporis eos aperiam ex eum corrupti modi error incidunt. Ipsam enim similique dolore unde ratione facere libero hic minus accusamus.
</span>
</div>
If you want to hide your text, then we can color text:
.spoiler {
color:transparent;
background-color: black;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="spoiler"> 1 start Proin porttitor sapien vitae felis maximus, in molestie sem egestas.
Vivamus lacus orci, molestie eget nibh in, lobortis blandit risus. 1 start
</span>
Sed a diam sagittis, tempor ligula et, mollis velit. Ut quis est congue, vestibulum magna non, ullamcorper enim. Nam ultricies, est in elementum aliquet
</p>
Related
I have two sibling elements which each contain dynamic content.
<div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div>
In some cases sibling-1 will have more content then sibling-2 and vice versa.
I would like the height of the second element sibling-2 always equal the height of the first sibling-1. If the height of sibling-2 is greater then the height of sibling-1 it will overflow the flex div and thus be scrollable.
Is there any way to accomplish this with Flexbox?
Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.
main {
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 7em;
border: thin solid black;
margin: 1em;
}
:not(.limiter)>div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section>
<div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
in flow text in flow text in flow text in flow text in flow text in flow text in</div>
</section>
<section class="limiter">
<div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
<section>
<div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
</main>
Is there any way to accomplish this with Flexbox?
Basically, no. The flex equal heights feature is based on the height of the container, not any particular sibling.
So sibling-1 and sibling-2 can always be equal height.
But flexbox has no built-in mechanism to limit the height of items to the height of one sibling.
Consider JavaScript or CSS positioning properties.
Here's an example using absolute positioning:
.flex {
display: flex;
width: 200px;
position: relative;
}
.flex>div {
flex: 0 0 50%;
border: 1px solid black;
box-sizing: border-box;
}
.sibling-2 {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
<div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>
jsFiddle
Yes you can accomplish this by making siblings 1 and 2 also flex containers, then on sibling-2 make an absolute div (also flex container) inside that will be the parent of your scroller
<div class="sibling-1 flex sibling"></div>
<div class="sibling-2 flex sibling">
<div class="absolute flex scroller-wrap">
<div class="relative vertical-scroller">
your content here
</div>
</div>
</div>
css:
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.flex{
display:flex;
}
.sibling-2{
flex:1;
}
.scroller-wrap{
height:100%;
}
on sibling 2 just set a minimum height on pixels - useful on responsive cases if siblings 1 and 2 stack each other on mobile
As I mentioned in the comments and has been continued in other answers, there is no flexbox method.
It is possible using position:absolute on the second sibling though...but since that's not actually a flexbox solution, this is here for information only.
.flex {
margin: 1rem auto;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
* {
margin: 0;
outline: 0;
}
.flex {
width: 80%;
margin: 1rem auto;
border: 1px solid grey;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quia, voluptatum! Perspiciatis praesentium nemo, labore mollitia numquam recusandae voluptatem consectetur amet deleniti cum nesciunt blanditiis, esse quis doloremque vero! Reiciendis
porro impedit perspiciatis. Amet in praesentium molestias ipsum ad quis quia doloribus, veniam unde, ea ducimus rerum porro tenetur voluptatem, a laudantium. Accusantium provident voluptatibus perferendis hic blanditiis laborum amet consequatur
esse, fugiat doloremque consectetur ullam sequi, ratione perspiciatis, voluptatem eaque vitae rem repellendus in architecto vel nulla animi neque. Accusantium animi voluptatum, suscipit possimus,</p>
</div>
<div class="sibling-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi quibusdam aliquam officia illo itaque ratione, iste architecto ad blanditiis fugiat sequi laborum cupiditate voluptatum, autem non? Quibusdam ad eius hic rem id. Libero, tempora
dicta reiciendis placeat nihil quia fuga iste aliquid quo minus labore sapiente fugit, similique non aliquam, beatae pariatur nobis fugiat! Ipsam nobis fugit maxime aliquam accusamus explicabo nostrum ab nemo adipisci dolorem qui porro ea pariatur
corporis aut reiciendis optio, sint eum nam suscipit itaque aspernatur recusandae. Cumque qui quod doloremque. Ut voluptates, asperiores, laborum excepturi quam odit, quos rerum assumenda sapiente saepe nisi? Numquam placeat repellat eum dolorem
reprehenderit dolores culpa id explicabo consequuntur. Quas nobis veritatis tempora animi similique earum commodi, laborum blanditiis dolor illo, eaque accusamus aliquid nam a ex, velit, maiores natus. Id totam ullam corporis. Repellat aperiam,
distinctio maxime, dolorum illum labore recusandae. Sequi repellendus provident deserunt amet culpa, ratione dignissimos! Quibusdam delectus mollitia, ducimus. Error id architecto, ea molestias voluptate impedit inventore amet ducimus modi repellat
in. Asperiores soluta veritatis id eius, distinctio nisi voluptates voluptatibus iste iusto error officia tempore! Ducimus sed commodi quisquam provident iure voluptatum aliquam, nobis rem dolore, consectetur, dolor rerum eum nam adipisci, libero
beatae eaque aliquid sapiente? Eius, earum quas nostrum quasi reiciendis officia quaerat omnis. Cupiditate suscipit et tempora quibusdam perspiciatis eius cum, nisi facere animi. Delectus magnam inventore ipsum, veritatis reiciendis. Ipsum adipisci
recusandae, similique quas labore voluptas animi eaque velit, alias eveniet qui libero obcaecati suscipit, quam nihil quos placeat.</p>
</div>
</div>
From your code and to avoid extra wrapping , sticky on a side, height:0 on the other then overflow:auto on the parent can also do the job with flex:
example (you will easily understand it)
.flex {
display: flex;
/* demo purpose */
width: 500px;
border: solid;
overflow: auto;/* make the parent scroll */
gap:0.5em;
}
.flex .sibling-1 {
position: sticky;/* stick the reference for the height */
top: 0;
}
.flex .sibling-2 {
height: 0;/* give it no height to start from and let the parent show the scrollbar */
}
<div class="flex">
<div class="sibling-1">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div class="sibling-2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
My simplified (to me at least) code snippet based on Lucent's answer:
main {
display: flex;
font-family: "nunito"
}
section1 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section2 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section1 > div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section1 class="scroll">
<div>I'm a div in section 1 ---
I have extra css rules of flex-basis 0px (making me as small as possible), flex 1 (making me fill up available space), and overflow y auto (making me scroll the extra content) --- My parent section 1 is a flex column --- My grandparent main is a flex row ---</div>
</section1>
<section2>
<div>I'm a div in section 2. --- My parent section 2 is a flex column --- My grandparent main is a flex row --- The height of the div in section 1 will adjust to my height.</div>
</section2>
</main>
I'm trying to recreate the following screenshot using CSS grid, is this possible, if so what do I need to change from my code below.
What I want to achieve:
My CSS so far:
.alt-Cards {
padding-top: 60px;
padding-bottom: 60px;
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 420px;
right: 0;
left: 0;
bottom: 0;
background: #e4e4e4;
}
}
.alt-Cards_Inner {
max-width:1440px;
width: 100%;
margin:0 auto;
}
.alt-Cards_Grid {
display: grid;
position: relative;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 60px;
grid-row-gap: 60px;
}
.alt-Cards_GridItem-Titles {
grid-column-start: 2;
}
JSFiddle
http://jsfiddle.net/2wztvqox/
.container {
width:960px;
margin:0 auto;
box-shadow:0 0 10px 0 rgba(0,0,0,.5);
background:linear-gradient(to bottom, #fff 0%, #fff 20%, #e0e0e0 20%, #e0e0e0 100%);
padding:50px;
box-sizing:border-box;
display:grid;
grid-template-columns: 405px 405px;
grid-gap:50px;
}
.left, .right {
display:flex;
justify-content:flex-start;
align-items:center;
flex-direction:column;
}
.left {
margin-top:100px;
}
.left img, .right img {
width:100%;
margin:20px 0;
}
<div class="container">
<div class="left">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
</div>
<div class="right">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi expedita reiciendis, eaque similique totam repellat hic quas. Aspernatur illo veniam accusantium sequi veritatis cum fuga voluptatum animi, hic reiciendis consequuntur!
</div>
<img src="https://picsum.photos/300/200" alt="">
</div>
</div>
If you know that it's always a 2 column layout, use nth-child(odd) to apply a translate to the grid items in the first column.
body {
padding: 0;
margin: 0;
}
.grid {
padding-top: 30px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.grid-item {
background: #ccc;
height: 200px;
}
.grid-item:nth-child(odd) {
transform: translatey(60px);
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
But as commented, it isn't necessary to use grid to achieve this layout. You could achieve this easily with some flexbox.
.item {
display: flex;
}
.text,
.img {
flex: 1 1 50%;
padding: 0 30px;
display: flex;
flex-direction: column;
align-self: center;
}
.img {
object-fit: cover;
width: 100%;
height: auto;
display: block;
}
.item:first-child {
padding-top: 60px;
}
.item:first-child .text {
margin-top: -60px;
align-self: flex-start;
}
.alt .text {
order: 1;
}
<div class="item alt"><div class="text"><h1>Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum...</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item "><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item alt"><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
<div class="item "><div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed tincidunt est, in ullamcorper tellus. Sed accumsan dui sem, non tempor lacus auctor interdum. Nunc eget imperdiet sem. Nullam elit diam, vestibulum efficitur metus non, condimentum facilisis turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Curabitur luctus ornare nunc, vitae sodales nunc facilisis sed. Donec ultricies enim ipsum, vitae fringilla erat tincidunt a. In scelerisque tempus porttitor. Sed dictum velit et nunc sollicitudin, at semper nulla varius. In id neque molestie mi eleifend porttitor. Nam ac ante tempus, eleifend quam id, semper lectus.</div><img src="https://picsum.photos/400/300" alt="" class="img"></div>
I would like to recreate the iTunes album view effect on the web and it must be responsive. I made an animated GIF to show the desired effect: http://files.katart.com/sgDkRGI
I've started a codepen using flexbox, but I can't seem to get the tabs to stay at the top. You can view it here: https://codepen.io/katartgraphics/pen/pWvNrP
Here is the markup:
jQuery(function($) {
$('.tab').on('click', function() {
$(this).siblings('.tab-content').slideUp();
$(this).next().slideDown();
});
});
.tabs-wrapper {
margin: 48px auto;
text-align: center;
}
.tab-container {
max-width: 960px;
margin: auto;
padding: 0 24px;
}
.tab > span {
display: block;
width: 100%;
height: 42px;
max-width: 280px;
margin: auto;
padding: 0 20px;
color: #555;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
line-height: 42px;
border: 1px solid #fff;
border-bottom: none;
background-color: whitesmoke;
box-sizing: border-box;
}
.tab-content {
display: none;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: left;
background-color: tomato;
}
.tab-content > *:first-child { margin-top: 0; }
.tab-content > *:last-child { margin-bottom: 0; }
#media (min-width: 600px) {
.tabs-wrapper {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.tab {
positiion: relative;
top: 0;
flex: 0 1 auto;
}
.tab-content {
position: relative;
top: 0;
flex: 1 1 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-wrapper">
<div class="tab"><span>Tab 1</span></div>
<div id="tab1" class="tab-content">
<div class="tab-container">
<h4>Tab 1 Content</h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="tab"><span>Tab 2</span></div>
<div id="tab2" class="tab-content">
<div class="tab-container">
<h4>Tab 2 Content</h4>
<p>Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="tab"><span>Tab 3</span></div>
<div id="tab3" class="tab-content">
<div class="tab-container">
<h4>Tab 3 Content</h4>
<p>Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="tab"><span>Tab 4</span></div>
<div id="tab4" class="tab-content">
<div class="tab-container">
<h4>Tab 4 Content</h4>
<p>Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
<h2>Other Content</h2>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente quod unde, dicta asperiores ipsa nam eius earum quisquam natus tempore molestias necessitatibus consequuntur id ab illum modi assumenda reprehenderit!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eligendi commodi facilis qui aut totam ipsam neque quod tempore omnis corrupti quaerat tenetur labore nesciunt, eum pariatur molestias velit a!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sequi unde iure iste aperiam ipsum officia temporibus consequuntur a pariatur aliquid, autem error, velit nam ad vitae eius deleniti cum.</div>
This question already has answers here:
How to create fluid trapezoid image with css?
(3 answers)
Closed 6 years ago.
What is the best way to create a diagonal shape like this with pure CSS maybe only using :after and :before pseudo elements on the content div? Thanks.
maybe it:
.content {
position: relative;
perspective: 100vw;
padding: 30px;
}
.content::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 130%;
background: tomato;
transform-origin: 100% 50%;
transform: translate(-25%) rotateY(-20deg);
outline: 1px solid transparent;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptatum recusandae quos soluta impedit! Deleniti facere enim, quia ut quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. Reprehenderit doloribus, delectus.
</div>
One way is to set a background on a container and rotate with a CSS transform.
Here's a simple example, use as many overlapping containers as needed:
body {
margin: 0;
overflow-x: hidden;
font-family: monospace;
color: #fff;
}
.container {
width: 110vw;
margin-top:10vh;
margin-left: -10vw;
padding-left: 10vw;
background: red;
box-shadow: 0 0 15px rgba(0, 0, 0, .33);
transform: rotate(-5deg);
}
.container-inner {
padding: 10vw;
max-width: 80vw;
transform: rotate(5deg);
}
h1 {
margin-left: 10%;
padding-top: 50px;
}
<div class="container">
<h1>Diagonal Background</h1>
<div class="container-inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
</p>
</div>
</div>
Normally when you have a block of text you can just float the image left or right to wrap the text around it, but in flexbox floats do not work and I am struggling to find a solution.
Bootstrap 4 is going to use flexbox for their new grid system but this might be a deal breaker if you can't have a block of text in a column and also have text wrap around an image.
Firstly, flexbox is not a grid system nor is it intended to replace one.
Indeed, Bootstrap 4 still has pretty much the same grid system but BS4 now adds the ability to use some of the benefits of flexbox in addition.
As for floats...yes, if you set the parent element to display:flex the immediate children (flex-children or flex-items) cannot be floated.
BUT since the display value is not inherited, your floated contents will still wrap fine.
img {
float: left;
margin-right: 1em;
}
.col-md-6,
.col-sm-6 {
background: pink;
}
.row {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="http://www.fillmurray.com/40/40" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
<div class="col-md-6 col-sm-6">
<img src="http://www.fillmurray.com/40/40" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
Not a full solution like float, but we can use + in CSS to wrap image's next tag.
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
h3 {
width: 100%;
}
.page-pic {
margin: 0 20px 0 0;
max-width: 200px;
}
.container .page-pic+p {
flex: 1;
position: relative;
top: -20px
}
<div class="container">
<h3>Some Title</h3>
<img src="https://picsum.photos/id/1073/200/200" class="page-pic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius. Cras dignissim,
metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel non ante. Nunc
odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
<h3>Another Title</h3>
<p>Another Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ornare quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus molestie sodales ante a suscipit. Proin sed diam nisi. Nunc lobortis et nulla auctor varius.
Cras dignissim, metus sit amet aliquam posuere, ante magna pharetra justo, at mattis turpis purus non nibh. Quisque congue mauris id ligula fringilla fermentum. Morbi laoreet nec nulla non rhoncus. Etiam vitae tellus eget nunc finibus eleifend vel
non ante. Nunc odio odio, fermentum ac hendrerit non, consequat nec felis. </p>
</div>