Now I'm trying to add a dark overlay on hover to these elements. Its doing it job, however its covering the hovered state image as well. Also it wont revert back because the overlay div covers the entire container. The desired effect would be to have every element covered with an overlay, with the exception to the expanded one.
https://codepen.io/SteveGWR/pen/NaZJyp
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="dark-cover"></div>
<div class="destination-title">Bath</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
<!-- row 2 -->
<ul class="grid-list">
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
Update Your code like this
<style>
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.grid-list{
width:100%;
float:left;
}
.grid-list li{
width:25%;
float:left;
position:relative;
height:200px;
}
.grid-list li .dark-cover{ display:none; position:absolute; background:rgba(0,0,0,0.7); width:100%; height:100%; left:0px; top:0px; }
.container:hover .dark-cover{ display:block;}
.container {
position: relative;
left: 50%;
margin-left: -475px;
/* background: #FF4346;*/
max-width: 950px;
width: 100%;
top: 20px;
height: 748px;
}
.grid-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
height: 190px;
}
.grid-list li {
position:relative;
height:100%;
}
.destination-copy {
display:none;
opacity:0;
transition:1s all;
position:absolute;
bottom:0px;
width:100%;
background:rgba(0,0,0,0.7);
color:#fff;
padding:12px;
font-size: 13px;
font-family: arial;
}
.cta-bath {
display: none;
opacity: 0;
transition: 1s all;
position: absolute;
bottom: 80px;
right: 110px;
background: #FFFFFF;
border: 2px solid #013A04;
border-radius: 3px;
color: #0a493e;
padding: 6px 15px 6px 15px;
/* line-height: normal; */
font-size: 13px;
font-weight: bold;
font-family: arial;
}
.promo-content {
display:none;
opacity:0;
transition:1s all;
position:absolute;
top:40px;
width:300px;
background:rgba(0,0,0,0.7);
color:#fff;
padding:12px;
font-size: 13px;
font-family: arial;
}
.promo-content h3 {
color:#fff;
font-size: 16px;
font-weight: bold;
font-family: arial;
}
.grid-list li:hover .destination-copy {
animation: 1s ease 0s normal forwards 1 fadein;
display:block;
}
.grid-list li:hover .cta-bath {
animation: 1.7s ease 0s normal forwards 1 fadein;
display:block;
}
.grid-list li:hover .promo-content {
animation: 2.7s ease 0s normal forwards 1 fadein;
display:block;
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
.grid-list li {
transition: width 0.5s, height 0.5s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 25%; /*CHANGE*/
/* min-width: 237px; */
/* margin: 1em; */
/* flex-wrap: wrap; */
list-style: none;
}
.grid-list li:hover {
width:75%;
height:158%;
z-index: 10;
}
.destination-title {
position:absolute;
bottom:80px;
right:0px;
background-color:#054940;
color:#fff;
font-size:16px;
font-weight: bold;
padding:6px;
width: 100px;
text-align: center;
}
/* Background images */
.bath {
background-image:url(http://placekitten.com/600/350);
}
.bath:hover {
background-image: url(http://placekitten.com/600/350);
}
.bristol {
background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
background-image: url(http://placekitten.com/600/355);
}
.cardiff {
background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
background-image:url(http://placekitten.com/600/356);
}
.cornwall {
background-image:url(http://placekitten.com/600/357);
clear: right;
}
.cornwall:hover {
background-image:url(http://placekitten.com/600/357);
}
.dorset {
background-image:url(http://placekitten.com/600/359);
}
.dorset:hover {
background-image:url(http://placekitten.com/600/359);
}
.Cotswolds {
background-image:url(http://placekitten.com/600/365);
}
.Cotswolds:hover {
background-image:url(http://placekitten.com/600/365);
}
.Exeter {
background-image:url(http://placekitten.com/600/366);
}
.Exeter:hover {
background-image:url(http://placekitten.com/600/366);
}
.London {
background-image:url(http://placekitten.com/600/367);
}
.London:hover {
background-image:url(http://placekitten.com/600/367);
}
.overlay-in .dark-cover{ display:none!important; }
</style>
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="dark-cover"></div>
<div class="destination-title">Bath</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="dark-cover"></div>
<div class="destination-title">Bristol</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="dark-cover"></div>
<div class="destination-title">Cardiff</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="dark-cover"></div>
<div class="destination-title">Cornwall</div>
<div class="cta-bath">Click Here</div>
<div class="promo-content"><h3>Promo Content</h3><br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
<!-- row 2 -->
<ul class="grid-list">
<li class="dorset">
<div class="dark-cover"></div>
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="dark-cover"></div>
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="dark-cover"></div>
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="dark-cover"></div>
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery("li").mouseover(function(){
jQuery(this).addClass("overlay-in");
});
jQuery("li").mouseleave(function(){
jQuery(this).removeClass("overlay-in");
});
</script>
If I understand well what are you trying to do is to change the style of other elements when you are hover one element.
You can use some jQuery for this. Something like:
$('.grid-list li').on('hover', function(){
$(this).siblings().toggleClass('darker');
});
Let me know if that is what are you looking for.
Related
I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
Why does my flex box not change width when changed. I am following along this tutorial https://www.youtube.com/watch?v=JJSoEo8JSnc and at minute 7:40 he changes the flex on class box-1 from flex:1 to flex:2 and then flex:3. When he does this it makes box-1 take up more of the width. When I do the same it does not change the width as it does in the video. I am trying to duplicate on this
.container-1 {
height: 100vh;
width: 100vw;
background-image: url('https://i.imgur.com/kkQFh8p.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.container-1 div {
border: 1px red solid;
padding: 10px;
color: white;
}
.box-1 {
flex: 3;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 1;
}
<div class="container-1">
<div class="box-1">
<h3>Box One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-1">
<h3>Box Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-1">
<h3>Box Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
width different background than the video but all else is the same. https://codepen.io/centem/pen/pozRMXm
You need to use different class names in your HTML. Replace box-1 of the 2nd and 3rd child to box-2 and box-3 respectively. With your current code all the boxes will have the same flex: 3 and will distribute equally between them instead of the 3 1 1 ratio that you desire.
.container-1 {
height: 100vh;
width: 100vw;
background-image: url('https://i.imgur.com/kkQFh8p.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.container-1 div {
border: 1px red solid;
padding: 10px;
color: white;
}
.box-1 {
flex: 3;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 1;
}
<div class="container-1">
<div class="box-1">
<h3>Box One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
I have problem problem with centering element on mobile devices, when height decreases, top content is hidden but on desktop is okey. Please see below link for see problem in screenshot
Desktop version
Mobile version
HTML
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.modal {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
example code
https://jsfiddle.net/twzud65n/3/
Seems like you have some elements that don't quite do something and have no styling applied to fit in. What is the suppose of modal-section?
Because you have position: fixed on your modal, you need to tell its children to not overflow their parent. width: 100% does that, height: auto means it can scale as much as needed allowing to scroll.
Try this:
.modal-section {
width: 100%;
height: auto;
}
It's because of justify-content: center which is centering your element (even if it's overflowing). You can turn it off and add margin:auto to .modal-section.
Example
.modal {
display: flex;
flex-flow: column nowrap;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.modal-section {
margin: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
Have a flex list which I've manged to get on a 4x4 row, as I have a total of 16 locations to add.
https://codepen.io/SteveGWR/pen/NaZJyp
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
Problem is when you hover it goes wild.
Anything i'm missing in the CSS to solve this?
Try using scale instead of changing the width. This will not affect the other elements. Make the CSS of .grid-list li:hover like this :
.grid-list li:hover {
position:relative;
transform: scaleX(1.5);
max-width: 380px;
height: 150%;
z-index: 99;
overflow: auto;
}
As it is the flex-wrap: wrap that makes them go wild, group them 4 by 4 and remove wrapping.
I also added a z-index so the hovered item stays on top.
Updated codepen
Stack snippet
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container {
position: absolute;
left: 50%;
margin-left: -475px;
background: #FF4346;
max-width: 950px;
width: 100%;
top: 10px;
height: 748px;
}
.grid-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
height: 230px;
}
.col {
flex: 1;
}
.grid-list .col {
width: 32%;
}
.grid-list li {
position:relative;
height:100%;
}
.destination-copy {
display:none;
opacity:0;
transition:1s all;
position:absolute;
bottom:0px;
width:100%;
background:rgba(0,0,0,0.7);
color:#fff;
padding:12px;
font-size: 13px;
font-family: arial;
}
.grid-list li:hover .destination-copy {
animation: 1s ease 0s normal forwards 1 fadein;
display:block;
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
.grid-list li {
transition: width 0.5s, height 0.5s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 25%; /*CHANGE*/
/* min-width: 237px; */
/* margin: 1em; */
/* flex-wrap: wrap; */
list-style: none;
}
.grid-list li:hover {
width:200%;
height:150%;
z-index: 10;
}
.destination-title {
position:absolute;
bottom:80px;
right:0px;
background-color:#054940;
color:#fff;
font-size:16px;
padding:6px;
width: 100px;
text-align: center;
}
/* Background images */
.bath {
background-image:url(http://placekitten.com/600/350);
}
.bath:hover {
background-image: url(http://placekitten.com/600/350);
}
.bristol {
background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
background-image: url(http://placekitten.com/600/355);
}
.cardiff {
background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
background-image:url(http://placekitten.com/600/356);
}
.cornwall {
background-image:url(http://placekitten.com/600/357);
clear: right;
}
.cornwall:hover {
background-image:url(http://placekitten.com/600/357);
}
.dorset {
background-image:url(http://placekitten.com/600/359);
clear: left;
}
.dorset:hover {
background-image:url(http://placekitten.com/600/359);
}
.Cotswolds {
background-image:url(http://placekitten.com/600/365);
clear: left;
}
.Cotswolds:hover {
background-image:url(http://placekitten.com/600/365);
}
.Exeter {
background-image:url(http://placekitten.com/600/366);
clear: left;
}
.Exeter:hover {
background-image:url(http://placekitten.com/600/366);
}
.London {
background-image:url(http://placekitten.com/600/367);
clear: left;
}
.London:hover {
background-image:url(http://placekitten.com/600/367);
}
<div class="container">
<ul class="grid-list">
<li class="bath">
<div class="destination-title">Bath</div>
<div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="bristol">
<div class="destination-title">Bristol</div>
<div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cardiff">
<div class="destination-title">Cardiff</div>
<div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="cornwall">
<div class="destination-title">Cornwall</div>
<div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
<ul class="grid-list">
<li class="dorset">
<div class="destination-title">Dorset</div>
<div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Cotswolds">
<div class="destination-title">Cotswolds</div>
<div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="Exeter">
<div class="destination-title">Exeter</div>
<div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
<li class="London">
<div class="destination-title">London</div>
<div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
</li>
</ul>
</div>
Updated based on a comment, where the row below won't be pushed down when resize the image.
By moving the height: 190px from .grid-list to .grid-list li, and then change the .grid-list li:hover to height: 270px; (150% of 190px), the row below will move down
Note, the codepen here is somewhat updated compared to the original.
Updated codepen 2
I'm using ✈ as list list specifier, it looks nice for my project when it is in single line , but for mobile view (in multiple line of a list) it looks bit ugly . do you have some remedies .. thank you
Actual view :
✈ this is what my problem with li tags please give me some remedies. ✈ this is what my problem with li tags please give me some remedies.
Expected view:
✈ This looks awesome to display is there anyway to do this. ✈ This looks awesome to display is there anyway to do this.
There are couple of different ways to achieve this.
Option 1. CSS Tables
ul {
list-style-type: none;
display: table;
width: 200px;
padding: 0;
}
li {
display: table-row;
}
li:before {
content: '✈ ';
padding-right: 5px;
display: table-cell;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 2. absolute and relative positions
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
position: relative;
margin-left: 25px;
}
li:before {
content: '✈ ';
position: absolute;
left: -20px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
Option 3. Flexbox
ul {
list-style-type: none;
width: 200px;
padding: 0;
}
li {
display: flex;
}
li:before {
content: '✈ ';
margin-right: 5px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
</ul>
I found a simple solution to use table(without border) with bootstrap.
<style>
table tr td{
vertical-align:top;
text-align:left;
}
</style>
<table>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
<tr>
<td>✈ </td>
<td>This looks awesome to display</td>
</tr>
</table>