I want to have some flipping boxes. On mouse over, the image flips and shows the text.
This works, but its not responsive (the 2nd row boxes ends over the previous row).
The problem is .f_contenedor height, but I want this to be responsive, so I'm using the "padding-top: 56%" property.
How can I make sure "f_contendor" height is the same as .face?
There is an example here http://bregna.org/flip.html
and this is the snippet. Is the same code, just the backgrounds are different.
.f_contenedor:hover .f_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.f_contenedor {
position: relative;
padding: 10px;
width: 50%;
height: auto;
z-index: 1;
float: left;
perspective: 1000;
box-sizing:border-box;;
}
.f_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .3s linear;
}
#media (min-width: 768px) {
.f_contenedor {
width: 50%;
}
}
#media (min-width: 992px) {
.f_contenedor {
width: 30%;
}
}
.shadow {
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}
.face {
background-size: cover;
background-repeat: no-repeat;
}
.face {
position: absolute;
width: 100%;
height: 0;
padding-top: 56%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
height: 100%;
color: white;
text-align: center;
background-color: #aaa;
}
.face.back span {
margin-top: -56%;
padding: 12px;
display: block;
}
<!doctype html>
<html lang="es_MX">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="/favicon.png"/>
<title>Flip</title>
</head>
<body>
<div class="f_contenedor">
<div class="f_card" style="background-color: black">
<div class="back face text-center shadow">
<span>
<h1>WEB</h1>
<p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam, porro quasi quibusdam reiciendis sequi soluta tenetur veniam voluptatem.
</p></span>
</div>
</div>
</div>
<div class="f_contenedor">
<div class="f_card">
<div class="front face shadow" style="background-color: orange">
</div>
<div class="back face text-center shadow">
<span>
<h1>CMS</h1>
<p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam, porro quasi quibusdam reiciendis sequi.
</p></span>
</div>
</div>
</div>
<div class="f_contenedor">
<div class="f_card">
<div class="front face shadow" style="background-color : firebrick;">
</div>
<div class="back face text-center shadow">
<span>
<h1>THE GRID</h1>
<p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam.
</p></span>
</div>
</div>
</div>
<div class="f_contenedor">
<div class="f_card">
<div class="front face shadow" style="background-color: green">
</div>
<div class="back face text-center shadow">
<span>
<h1>FLOWERS</h1>
<p>Ad, aperiam blanditiis dolorem dolorum ea earum ipsam laboriosam molestias non odio provident .
</p></span>
</div>
</div>
</div>
<div class="f_contenedor">
<div class="f_card">
<div class="front face shadow" style="background-color: yellow">
</div>
<div class="back face text-center shadow">
<span>
<h1>DRINKS</h1>
<p>Accusamus animi earum enim ex impedit nesciunt nihil quod quos vel? Dolores fugit harum modi placeat quasi quam?
</p></span>
</div>
</div>
</div>
<div class="f_contenedor">
<div class="f_card">
<div class="front face shadow" style="background-color: greenyellow">
</div>
<div class="back face text-center shadow">
<span>
<h1>MURALS</h1>
<p>Aperiam aut consequuntur nostrum rem similique temporibus veritatis.
</p></span>
</div>
</div>
</div>
</body>
</html>
You could slightly adjust your CSS so that the .back face is exclusively positioned with absolute, and aligned to the top of the parent. Additionally, you would want to adjust the .face to be relatively positioned.
So something along these lines:
.face {
/* position: absolute; Remove this */
position:relative; /* Position the face relatively by default */
width: 100%;
height: 0;
padding-top: 56%;
backface-visibility: hidden;
}
.face.back {
position:absolute; /* For back faces, these should be positioned with absolute */
top:0; /* Align back faces with the top of the parent */
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
height: 100%;
color: white;
text-align: center;
background-color: #aaa;
}
Related
I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.
This is what I got so far HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class="winter">
<div class="outside-winter-border">
<div class="insdie-winter-border">
<div class="section-heading">
<div class="wh">
<h2>Winter</h2>
</div>
</div>
<div class="content-wrapper">
<div class="winter-image">
<div class="section-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class="winter">
<div class="outside-winter-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="insdie-winter-border">
<div class="wh">
<a href="winter.html">
<img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
</a>
</div>
<div class="content-wrapper">
<div class="winter-image">
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think you can try this (insted of .winter-image and .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
If anyone can provide suggestions without the use of positioning absolute, it would be most appreciated.
I have created some flipcards with the html and css below: the front ideally should be the image and when hovered over, the image flips revealing the text on the back. The text should fit within the confines of the image space as well as scaling both image and text as the screenwidth changes.
Does anyone know how to get this scaling to work?
Also, does anyone know how to get the flip animation to work so that there is no horizontal or vertical movement when you hover over the image?
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Document</title>
<style>
.card_front {
height: 25vw;
width: 25vw;
}
.flip_card_flex {
display: grid;
}
.card_body {
display: flex;
flex-direction: column;
transform-style: preserve-3d;
transition: transform 1.5s;
}
.card:hover .card_body,
.card:focus .card_body {
transform: rotateX(-180deg);
transition: transform 1.5s;
}
.card:hover .card_back {
display: inline-block;
}
.card:hover .front {
display: none;
}
.card_front {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card_back {
transform: rotateX(-180deg) translate(0%, 0);
display: none;
}
</style>
</head>
</html>
<!-- Flip cards-->
<div class="Tech_Title row">
<h2 class="fs-2">example</h2>
</div>
<div class="flip_card_flex row justify-content-evenly pt-5">
<div class="card">
<div class="card_body">
<img class="card_front img-fluid" src="https://www.w3schools.com/css/img_5terre.jpg" alt="html5_logo">
<p class="card_back text-dark bg-light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora perferendis consectetur, eos odit debitis rerum porro ad nobis quos velit.
</p>
</div>
</div>
<div class="card">
<div class="card_body">
<img class="card_front img-fluid" src="https://www.w3schools.com/css/img_forest.jpg" alt="css3_logo">
<p class="card_back text-dark bg-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nam iste asperiores delectus molestiae a ducimus numquam sapiente, possimus quo. Eveniet, tempore adipisci saepe qui hic exercitationem ratione consectetur nostrum!</p>
</div>
</div>
</div>
</body>
</html>
This code needs customization but can help :
.flipcards {
display: flex;
justify-content: center;
align-items: center;
}
.flipcards .flipcard {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 25vw;
height: 25vw;
}
.flipcards .flipcard:hover .flipcard__inner {
transform: rotateY(-180deg);
box-shadow: 0px 0px 0px -20px;
}
.flipcards .flipcard__inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
.flipcards .flipcard__inner .__front,
.flipcards .flipcard__inner .__back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* Safari */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
background-color: var(--color2);
}
.flipcards .flipcard__inner .__front {
z-index: 1;
flex-flow: column;
}
.flipcards .flipcard__inner .__back {
transform: rotateY(-180deg);
z-index: 2;
}
<div class="flipcards">
<div class="flip_card_flex row justify-content-evenly pt-5">
<div class="flipcard flipcard--red">
<div class="flipcard__inner">
<div class="__front">
<img class="card_front img-fluid" src="https://www.w3schools.com/css/img_5terre.jpg" alt="html5_logo">
</div>
<div class="__back">
<p class="card_back text-dark bg-light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora perferendis consectetur, eos odit debitis rerum porro ad nobis quos velit.
</p>
</div>
</div>
</div>
<div class="flipcard flipcard--blue">
<div class="flipcard__inner">
<div class="__front">
<img class="card_front img-fluid" src="https://www.w3schools.com/css/img_forest.jpg" alt="css3_logo">
</div>
<div class="__back">
<p class="card_back text-dark bg-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nam iste asperiores delectus molestiae a ducimus numquam sapiente, possimus quo. Eveniet, tempore adipisci saepe qui hic exercitationem ratione consectetur nostrum!</p>
</div>
</div>
</div>
</div>
</div>
I 've got the following code, and when I am viewing on mobile the Slick Carousel is bigger than the parent element and I couldn't fix it with any settings. I am using Boostrap as well.
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/assets/Intech Logo.png" alt="INTECH DYNAMICS logo" />
</a>
</div>
</nav>
<div class="wrapper-section-1">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center imagine">
<img class="img img-fluid floating" src="/assets/Header Image.png" alt="Careers banner image" />
</div>
<div class="col-lg-6 col-md-6 col-xl-6 col-xs-12 col-xm-12 d-flex justify-content-center">
<div class="row">
<div class="col-lg-12 title">
<h1 class="text-title">CAREERS</h1>
</div>
<div class="col-lg-12 slide">
<div class="single-item slider slide">
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Darius Opro</span><span class="font-weight-normal"> Full Stack
Programmer</span>
</div>
<div>
<div class="font-italic">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Illo at reiciendis architecto harum nihil culpa accusantium
saepe ut, tempore quibusdam ex odit magnam nemo accusamus
numquam consequatur? Praesentium, voluptates pariatur!</div>
<br>
<span class="font-weight-bold">Cosmin Mihalache</span><span class="font-weight-normal"> Front End
Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The CSS looks like this:
.wrapper-section-1 {
font-family: IBMPlexSans-Medum;
color: white;
margin-top: 54px;
width: auto;
padding: 8vh;
background-image: linear-gradient(to right, #1c003b, #5216aa);
}
.img {
max-width: 70%;
height: auto;
}
.imagine {
padding: 30px 0 30px 0;
}
.title {
align-items: flex-end;
display: flex;
justify-content: flex-end;
}
.text-title {
margin-bottom: 2rem;
}
/* Slick Carousel */
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out 0.3s;
opacity: 0.2;
}
.slick-active {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
.slide {
width: 500px;
margin: 0;
text-align: right;
background-color: blue
}
/* Custom Arrows */
.prev-arrow {
position: absolute;
bottom: -50px;
left: 400px;
cursor: pointer;
}
.next-arrow {
right: 3px;
position: absolute;
bottom: -50px;
cursor: pointer;
}
/* Floating Animation */
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
$(document).on("ready", function () {
$(".single-item").slick({
lazyLoad: "ondemand", // ondemand progressive anticipated
infinite: true,
settings: "unslick",
prevArrow:
'<span class="prev-arrow"><i class="fas fa-angle-left"></i></span>',
nextArrow:
'<span class="next-arrow"><i class="fas fa-angle-right"></i></span>',
});
});
I attached a photo to have a better idea of what is happening. I tried to give to the carousel padding, to set width in percentage with parent element but nothing worked.
Update: Pretty sure that JS has nothing to do with it but I attached anyway
.pop-up {
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90vh;
width: 50vw;
max-width: 80%;
background-color: #132c23;
border: 5px solid #fffbce;
border-radius: 20px;
}
.wrap-pop-up-div {
height: 100%;
width: 100%;
position: relative;
}
.pop-carousel {
position: absolute;
top: 12.5%;
left: 30%;
}
.close-modal {
position: absolute;
right: 5%;
top: 2%;
outline: none;
background: none;
cursor: pointer;
border: none;
font-size: 3rem;
color: #fffbce;
}
.close-modal:hover {
color: #510000;
transition-duration: 300ms;
}
.pop-carousel .container-carousel {
overflow: hidden;
width: 600px;
height: auto;
}
.pop-carousel .slides {
display: flex;
align-items: center;
align-content: center;
}
.pop-carousel img {
width: 600px;
height: 400px;
flex-shrink: 0;
}
.list-pop-up {
position: relative;
left: 2%;
top: 15%;
}
.pop-up ul {
padding: 0px;
list-style: none;
font-family: rochester;
font-size: 1.8rem;
}
.pop-up ul a {
color: #fffbce;
text-decoration: none;
}
.pop-up ul a:hover {
color: #4c8d49;
text-decoration: underline;
transition-duration: 350ms;
}
.pop-up ul a.active {
color: #4c8d49;
text-decoration: underline;
}
.pop-up ul li {
padding: 10px 0;
}
.wrap-pop-up-div > .para-div,
.wrap-pop-up-div > a {
position: absolute;
top: 70%;
}
.wrap-pop-up-div > .para-div {
left: 30%;
width: 600px;
text-align: justify;
font-size: 1.2rem;
color: #fffbce;
}
.wrap-pop-up-div > a {
left: 7.5%;
top: 80%;
text-decoration: none;
color: #fffbce;
font-size: 1.3rem;
border: 2px solid #fffbce;
padding: 5px 7.5px;
border-radius: 5px;
}
.wrap-pop-up-div > a:hover {
border-color: #510000;
background-color: #510000;
transition-duration: 200ms;
-webkit-transition-duration: 200ms;
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
}
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
<div class="pop-up" >
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a class="active" href="#">
Badeparadies
</a>
</li>
<li>
<a href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a href="#">
Badeparadies
</a>
</li>
<li>
<a class="active" href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
</div>
</div>
<div class="overlay show-toggle"></div>
I have some modals, which should pop up in full screen at 950px (max-width). Thus I implemented a media query but it does not work. Does anyone know an alternative way? I also tried to on my pop-up class a 100vw but this had no effect at all. Perhaps someone has an idea why? The code I post here is basically the way how I did it for my background of the modal (the greyish overlay), so it worked for me in this document already, seems odd that it isn't working now.
CSS:
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
HTML:
<div class="pop-up" >
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a class="active" href="#">
Badeparadies
</a>
</li>
<li>
<a href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
<div class="wrap-pop-up-div show-toggle">
<button class="close-modal">×</button>
<div class="list-pop-up">
<ul>
<li>
<a href="#">
Badeparadies
</a>
</li>
<li>
<a class="active" href="#">
Trieberger Wasserfälle
</a>
</li>
</ul>
</div>
<div class="pop-carousel">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
<img
src="../source/img/gen-info/Rooms/bspForRooms.jpg"
alt="roomForThree"
/>
</div>
</div>
</div>
<div class="para-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquid consectetur sit optio eius consequuntur porro similique ducimus magni id, sint, aut fugiat aliquam ab magnam facere ipsum cupiditate autem incidunt tenetur possimus excepturi accusantium nostrum. At fugiat ex natus ea ut id voluptates, vero, similique perferendis expedita tenetur esse.</p>
</div>
<a class="box-shadower" href="#">Buchen</a>
</div>
</div>
</div>
<div class="overlay show-toggle"></div>
You have
max-width: 80%;
transform: translate(-50%, -50%);
in your style for pop-up. Change your css to
#media (max-width: 950px) {
.pop-up {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
max-width: 100%;
transform: translate(0, 0);
}
}
.pop-up {
transform: translate(-50%, -50%);
max-width: 80%;
border: 5px solid #fffbce;
border-radius: 20px;
}
messes up your popup if your media query is active. Add
#media (max-width: 950px) {
.pop-up {
transform: none;
max-width: 100%;
border: none;
border-radius: 0;
}
}
as well and it should be good.
I want to make an image slider with thumbnail images to select from, my idea is allign all images horizontally and hide overfolwn than with javascript i will just change the left postion to display the needed thumbnail, but I couldn't figure out how to css images to align hrizontally and hide the part that goes beyond the container of the thumnails, I am using spectre css framework, my HTML looks like this
.img-list {
margin-bottom: 20px;
height: 100px;
width: 100%;
overflow-x: hidden;
}
#media (max-width: 600px) {
.img-list {
height: 50px;
}
}
.img-container {
height: 100%;
position: relative;
overflow: visible;
}
.img-container img {
height: 100%;
display: inline-block;
position: relative;
}
.img-main {
width: 100%;
}
.img-main img {
width: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<div class="container">
<div class="columns">
<div class="column col-md-12">
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
</div>
<div class="column col-md-12">
<h1>Peugeaut 206</h1>
<input type="number" onchange="showImage(this)" value="1">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam culpa sint recusandae architecto odit tenetur
fugit rerum soluta quidem velit. Eos provident nemo dolores vitae pariatur perspiciatis delectus ex dignissimos!
Quibusdam architecto natus nam ullam cupiditate deserunt voluptatem nulla inventore nesciunt error recusandae
quod ab, harum temporibus laboriosam numquam facilis beatae. Numquam odit dolorem quasi rerum aut cupiditate
distinctio ad! Assumenda aut, repellat nihil, fugit doloremque doloribus harum possimus commodi aliquam recusandae
reiciendis delectus vel modi quia sapiente sit voluptas deleniti. Repellat magni rerum fuga vitae odio ad
ullam tempora.</p>
</div>
</div>
</div>
You can simply use white-space:nowrap
.img-list {
margin-bottom: 20px;
height: 100px;
width: 100%;
overflow: auto; /*Show horizontal scroll*/
}
#media (max-width: 600px) {
.img-list {
height: 50px;
}
}
.img-container {
height: 100%;
position: relative;
white-space:nowrap; /*Added this*/
}
.img-container img {
height: 100%;
display: inline-block;
vertical-align:top; /*to remove unwanted whitespace */
position: relative;
}
.img-main {
width: 100%;
}
.img-main img {
width: 100%;
}
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
Flexbox is good option but if you want you can add to div with a list of thumbnail images white-space: nowrap
Here is jsfiddle:
.img-container {
white-space: nowrap;
}
.img-container img {
height: 80px;
width: 80px;
display: inline-block;
}
.img-list {
height: 100px;
width: 100%;
}
.img-main img {
width: 100%;
}
<div class="img-main">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
</div>
<div class="img-list ">
<div class="img-container">
<img src="https://preview.ibb.co/gxVppG/img1.jpg">
<img src="https://preview.ibb.co/iZ3Lww/img2.jpg">
<img src="https://preview.ibb.co/iQsPOb/img3.jpg">
<img src="https://preview.ibb.co/gFFdib/img4.jpg">
<img src="https://preview.ibb.co/hS5ppG/img5.jpg">
<img src="https://preview.ibb.co/goKtGw/img6.jpg">
<img src="https://preview.ibb.co/bSWjOb/img7.jpg">
<img src="https://preview.ibb.co/i2o9pG/img8.jpg">
</div>
</div>
I have updated CSS removed the unnecessary style.
My solution of choice is Flexbox!
To class .img-container:
add display: flex; - this turns the container into a flex container
add flex-direction: row; - this is default but illustrates the example
add flex-wrap: nowrap; - this is also default but also illustrates the example
finally, change overflow to hidden
jsfiddle demo
I believe this achieves what you desire. Please let me know if I'm mistaken.