I am trying to scale my slides on hover. But if i enable the overflow of the wrapper, it overflows in x-axis as well, i only want it to overflow vertically.
Please see the codepen: http://codepen.io/faranali9/pen/qRPXGq
HTML:
<div class="wrapper">
<div class="container slider">
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
</div>
</div>
CSS:
.wrapper{
padding:0 30px;
}
img{
max-width:100%;
}
.slide{
transition:all 0.3s;
transform-origin:center;
}
.slide:hover{
transform:scale(1.3);
}
.description{
display:none;
}
.slide:hover .description{
display:block;
}
JS:
$('.slider').slick(
{
slidesToShow:5,
arrows:true
});
I think you should be scaling the img instead of the .slide. I also added some padding to the .slide to accommodate the top overflow.
https://codepen.io/anon/pen/egGyKw
Related
i have the problem with tailwind that the w-96 show correct and w-86 show not correct, what is the problem ?
<body>
<div class="mx-auto mt-20 mx-10">
<div class="mx-auto justify-center w-98">
<img class="" src="/image-product-mobile.jpg" alt="" srcset="" />
<h1 class="font-bold">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Incidunt, accusamus.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate praesentium eius deserunt aliquid cum saepe quod nemo provident magni modi.</p>
</div>
</div>
</body>
</html>
here the picture
w-86 is not a Tailwind class.
https://tailwindcss.com/docs/width
See the section on "Customizing your theme" and "Arbitrary values" on the above link.
I want to force my text to always be two lines.
If it's longer than two lines then it should have "..." at the end.
If it's shorter, then the second line should be empty.
Can this be done with CSS only?
I'm posting this again cause someone closed it as duplicate but linked a solution which isn't what I'm asking. This is the solution linked:
Limit text length to n lines using CSS
but it doesn't cover one of my cases (when the text is shorter than 2 lines)
EDIT: Here's a JSFiddle showing how in my other case it doesn't work:
https://jsfiddle.net/Lukgzefy/
<div class="cards">
<div class="card">
<div class="img"></div>
<h2>lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
<div class="card">
<div class="img"></div>
<h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
</div>
</div>
As you can see, the first one should occupy 2 lines (and the second should be empty) but instead it only takes one, throwing the whole thing off.
I need to make a blocks like on the picture
Left block is col-5, right is col-7, which must have two rows with 50% height of the left block.
How to make 50%-height blocks?
.row {
background: #f8f9fa;
}
.col,
.col-5,
.col-7 {
border: solid 1px #6c757d;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis distinctio at, molestias doloremque optio tempora laudantium facere sequi. Tempore aliquid exercitationem accusamus nulla culpa dolorum rerum consequatur impedit quia porro? Lorem ipsum
dolor sit amet.
</div>
<div class="col-7">
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem....
</div>
</div>
</div>
</div>
</div>
You can do it this way, or use Flexbox instead of Bootstrap sizing utilities to create the layout you want. Flexbox has been designed especially to facilitate the creation of this kind of structure.
My mistake is that I set the height for a cols in the right block.
When I wrapped each .col in a .row and set a height of 50% for these rows, everything worked as it should. Like in droduit answer.
I have added code for thumbnail sliders it should display all the thumnail images and should move one by one.It is working fine for mobile devices but getting problem in desktop.It is displaying only one image and it is sliding but i need to display all the images and the image should slide one by one.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/gallery/01.jpg" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="images/gallery/02.jpg" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code which i have added.
Here is the fiddle link: http://jsfiddle.net/5j07ogyc/
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-3">
<img src="images/gallery/01.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/02.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/03.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/04.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/01.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/02.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/03.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
<div class="item">
<div class="col-md-3">
<img src="images/gallery/04.jpg" class="img-responsives">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi
doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio
similique suscipit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery:
(function () {
$('#carousel123').carousel({ interval: 2000 });
$('#carouselABC').carousel({ interval: 3600 });
}());
(function () {
$('.carousel-showmanymoveone .item').each(function () {
var itemToClone = $(this);
for (var i = 1; i < 4; i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-" + (i))
.appendTo($(this));
}
});
}());
solved by adding this as a slider and responsive
I'm using Bootstrap 4 and trying to have columns which are the same height (which I thought Bootstrap did by default).
This is my markup:
<div class="row">
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
</div>
And the result is this:
I'd like the purple headings to align, as well as the columns themselves.
Here is the CSS I'm using:
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
.table-text {
padding:10px;
background-color: white !important;
}
Here's a Pen: https://codepen.io/anon/pen/ZxeLpO
Edit:
Since you want both, the titles AND the body text parts to be the same height while also making sure that they are responsive, you can use the re-ordering classes in combination with the h-100 class (height:100%) to achieve the desired effect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
</style>
<div class="container bg-light p-3">
<div class="row">
<div class="col-md-4">
<div class="table-heading h-100">
Title1 Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-1">
<div class="bg-white h-100 px-3">
Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-2">
<div class="bg-white h-100 px-3">
Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title3 Short Lorem
</div>
</div>
<div class="col-md-4 order-md-3">
<div class="bg-white h-100 px-3">
Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
</div>
</div>
The classes like order-md-1 etc. only kick in on screens that are medium (md) or larger. In this case here, it has the effect of the body part columns being pushed what looks like the next row. While on smaller screens, no re-ordering happens and therefore, on smaller screens, the columns appear in the same order as they are in the HTML.
If you add h-100 as a class to the divs with col-md-4 as a class then it will behave as you expect.
h-100 is the bootstrap4 utility class to set the height to 100%, which will make all the columns have a height equal to the row they all reside in.
<div class="col-md-4 h-100">
...
</div>
Update, you can add height: 100% to the css class .table-text to fill the empty space.