I want the image take up the whole page. Right now there's a big space under the image. Changing the transform, position and size properties doesn't affect the empty space's size.
HTML:
<head>
<link rel="stylesheet" href="layoutindex.css" type="text/css"></link>
</head>
<body>
<div class="wrapper">
<header>
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg" class="background">
</header>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
position: absolute;
height: 100%;
width: 100vw;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(2);
}
Related
I want my position fixed to viewport text to change color depending on where you are on the website. I tried adding position absolute containers, which would be clipped by the text, but it doesn't seem to work. E.g. text is black on white background, but white on every other color.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div>
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
<div class="fp-container-3"></div>
</div>
</body>
</html>
CSS:
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width:100vw;
top: 10vh;
z-index: 1;
}
.fp-container-1 {
display: flex;
position: absolute;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
position: absolute;
top: 100vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
.fp-container-3 {
display: flex;
position: absolute;
top: 150vh;
height: 200vh;
width: 100vw;
background-color: yellowgreen;
clip-path: url(.header);
z-index: -1;
}
I want to create an image slideshow, which only shows one image at a time. However, I want to use relative values for every child of the parent container, so that I can easily resize the slideshow. Every image should have the same height and width.
As I already mentioned, I only want to show one image at a time. As a result, the others images need to be hidden with overflow: hidden;. The problem is that my images do not even overflow in Firefox.
.image-slider {
height: 20rem;
width: 20rem;
}
.image-slider .main {
display: flex;
align-items: center;
}
.main .images {
display: flex;
overflow: auto;
width: 90%;
height: 100%;
}
.main .images img {
object-fit: scale-down;
width: 100%;
height: 100%;
}
<div class="image-slider">
<div class="main">
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/768px-Solid_blue.svg.png" />
</div>
</div>
</div>
I want that only the red image is displayed, and that the blue one should vanish because it should overflow. I'm pretty sure that the issue is because of my relative values, however I can't explain why. In Chrome, I achieve my desired result with the above code.
How can I create a slideshow, which is easily resizable, sets all images to the same size (regardless of the source width and height), shows only one image at a time and hides the other ones?
If want use this slideshow and size inheritance parent ( in the code below image1 small and image2 large ,but all images same size in display)
(Use snippet in full screen!)
const image1 = document.querySelector("#image1")
const image2 = document.querySelector("#image2")
const circle1 = document.querySelector(".circle.one")
const circle2 = document.querySelector(".circle.two")
console.log(image1)
circle1.addEventListener("click", () => {
image1.classList.add("active")
image2.classList.remove("active")
})
circle2.addEventListener("click", () => {
image1.classList.remove("active")
image2.classList.toggle("active")
})
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.image-slider {
position: relative;
height: 20rem;
width: 20rem;
}
.image-slider .main {
width: 100%;
}
.images {
display: none;
}
.images.active {
margin: 0 auto;
display: flex;
overflow: auto;
width: 90%;
height: 100%;
}
.main .images img {
object-fit: scale-down;
width: 100%;
height: 100%;
}
.circles {
position: absolute;
width: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid black;
text-align: center;
color: white;
background-color: black;
margin: 1rem 1rem;
cursor: pointer;
}
.circle:hover {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
<div class="image-slider">
<div class="main">
<div id="image1" class="images active">
<img src="https://free-images.com/sm/d839/earth_clouds_jpeg.jpg" />
</div>
<div id="image2" class="images">
<img
src="https://free-images.com/lg/52d5/earth_planet_space_planet.jpg"
/>
</div>
</div>
<div class="circles">
<div class="circle one">1</div>
<div class="circle two">2</div>
</div>
</div>
I used width: 300%; for .main then width: 100% for .images, so that three images placed together by display:flex. Also I set overflow: hidden for .image-slider, In order to it shows only one image in a time.
Also, I used setTimeout function, in order to be slide images.
const animate1 = document.querySelector("img:nth-child(2)");
setTimeout(function() {
animate1.classList.add("animate1");
}, 1000);
const animate2 = document.querySelector("img:nth-child(3)");
setTimeout(function() {
animate2.classList.add("animate2");
}, 2000);
.image-slider {
height: 20rem;
width: 20rem;
overflow: hidden;
}
.image-slider .main {
display: flex;
align-items: center;
width: 300%;
height: 100%;
}
.main .images {
display: flex;
width: 100%;
height: 100%;
}
.main .images img {
width: 100%;
height: 100%;
}
img:nth-child(2){
transition: 1s transform;
}
.animate1 {
transform: translateX(-20rem);
}
img:nth-child(3){
transition: 1s transform;
}
.animate2{
transform: translateX(-40rem);
}
<div class="image-slider">
<div class="main">
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/768px-Solid_blue.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
</div>
</div>
</div>
Adding flex-shrink: 0; to the image elements solves the problem.
I'm trying to display an app bar and three images in a column, that uses 100% of the height of the screen. The images are supposed to use the whole width of the column with the rest being cut off. I can get it working with just divs, but I'm having trouble when using images.
Here is a version to illustrate how it should look like. This has an app bar of height 50 and three "images" that fill the rest of the space:
https://codepen.io/Meerpohl/pen/zYxRKRV
And here is what I get with images. The images stretch the heights of my divs and ultimately of everything else, resulting in that scrollbar. Instead I need thin slices of the images.
html, body {
height: 100%;
margin: 0;
}
.root {
height: 100%;
display: flex;
flex-direction: column;
}
.appbar {
height: 50px;
text-align: center;
background-color: coral;
}
.container {
flex: 1;
}
.item {
height:33.33%;
overflow:hidden;
}
img {
width: 100%;
object-fit: cover;
}
<div class="root">
<div class="appbar">
This is a nice app bar
</div>
<div class="container">
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
</div>
</div>
https://codepen.io/Meerpohl/pen/eYmVdro
The code is the same in both cases. One just uses text instead images.
.item {
position: relative;
height:33%;
overflow:hidden;
}
img {
position: absolute;
transform: translateY(-50%);
width: 100%;
object-fit: cover;
}
this should work i think!
i'm on the train right now, so I can't give you a pen.
You can position the image absolute in the parent div (this should be relative) and translateY so it is centered.
Hope this is what you want to do ;)
use this!
img {width: 100%; object-fit: cover; max-height: 33.33vh; }
Try this:
html, body {
height: 100%;
margin: 0;
}
.root {
height: 100%;
display: flex;
flex-direction: column;
}
.appbar {
height: 50px;
background-color: coral;
display: flex;
justify-content: center;
align-items: center;
}
.container {
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
}
.item {
overflow: hidden;
display: flex;
flex: 1;
}
img {
width: 100%;
object-fit: cover;
}
added calc to .container and display:flex on .item, removed some unused properties.
Codepen: https://codepen.io/Liveindream/pen/NWPygpx
I'm trying to create a horizontally scrolling image gallery and I am having trouble centering it in the middle of the window. I tried to add display of flex to the body and do it that way, it didn't work for me.
I'm new at flexbox so I'm not sure if I'm doing this right, I'm just looking for an overall constructive criticism and guidance.
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 2em;
}
.wrapper {
display: flex;
flex-direction: row;
}
img {
min-height: 400px;
max-height: 420px;
display: flex;
padding-right: 2em;
}
<div class="wrapper">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<img src="https://source.unsplash.com/collection/1163637/480x480">
</div>
Here's the example on Codepen.
In order to center a div on the screen, you can change the top property as shown below:
.wrapper{
display: flex;
flex-direction: row;
position: absolute;
top: 20%;
}
And to hide horizontal scrolling you can do this:
html, body{
width: 100%;
height: 100%;
overflow-y: hidden;
}
To overlay text on an image when you hover:
<div class="img_container_1">
<img src="https://source.unsplash.com/collection/1163637/480x480">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: inherit;
width: inherit;
transition: .5s ease;
}
.image_container_1{
position: relative;
}
.img_container_1:hover .overlay {
opacity: 1;
}
img {
min-height: 400px;
max-height: 420px;
display: flex;
padding-right: 2em;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
You can find the full demo here: https://codepen.io/anon/pen/LJRVwb?editors=1100
To vertically center everything in your wrapper with flexbox, you need to add align-items: center; to .wrapper.
The wrapper is also matching the height of its contents in your example, so you won't see any difference unless you give .wrapper a height.
You set body to height: 100%;, which is what makes your example scroll vertically at the moment. Removing that removes the scrollbar as long as your view is big enough to hold all of its content vertically.
Adjusted CSS:
html, body {
width: 100%;
}
body {
margin: 2em;
}
.wrapper {
display: flex;
align-items: center;
height: 500px; /* Example height */
flex-direction: row; /* It's this by default, so you could remove this if you want */
}
img {
min-height: 400px;
max-height: 420px;
padding-right: 2em;
}
I made an adjusted example on CodePen that works for reference: https://codepen.io/happikitsune/pen/rZMOWO
So for 3 days all I've been trying to do is have:
3 images shaped into circles
sitting aligned horizontally, equal distance apart
taking up central 70% of the screen
where all heights and widths are based on % (so they adjust with resizing of the browsers)
It seems like such a simple task, but after 3 days and asking multiple questions, I'm getting nowhere. Please, can someone write me a code to achieve this?
If it helps, I have this circle code so far:
Thanks if you can help me
(I am new to coding)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{
width: 100%;
height: 100%;
}
/*Parallax*/
.parallax{
background-image: url("bg.jpg");
height: 540px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
position:relative;
}
/*Parallax*/
#header{
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 20%;
font-size: 4vw;
display: flex;
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 20px;
background-color: #357eca;
width: 50%;
word-wrap: break-word;
opacity: 0.9;
font-weight: 900;
padding-left: 5%;
padding-right: 5%;
}
h5
{
color:white;
text-align: center;
font-family: 'Montserrat';
text-transform: uppercase;
font-weight: 900;
/*-webkit-margin-before:0.67em;
-webkit-margin-after:0.67em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
-webkit-tap-highlight-colour:rgba(0,0,0,0);
-webkit-font-smoothing:antialiased;
-webkit-box-direction:normal;
position: absolute;*/
}
h5:after, h5:before
{
content: '';
width: 50px;
height: 2px;
background: black;
margin: 0 10px;
}
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 100%;
height: 100%;
background-size: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
height: 50vh;
justify-content: space-around;
}
.wrap {
width: 30%;
height:50%;
}
.flex {
height: 50vh;
display: flex;
justify-content: space-around;
}
.flex > div {
flex: 0 0 23%;
}
</style>
</head>
<body>
<div id="navigation"></div>
<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>
<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<div id="container1">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
</div>
<div id="content" style="margin-top: 100px;">
<p style="padding-bottom: 300px;">Helllllloooooooooo</p>
</div>
<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>
You can use flex with justify-content to either space-between or space-around (or space-evenly - a new property that isn't well supported, only works in firefox) depending on what you mean by having the elements equidistant apart (read more about that property here). Set a flex-basis on the flex children to establish their width, then nest your elements with the background inside of the flex child so you can use padding-bottom: 100% to make the element as tall as it is wide so that it's a square - or a perfect circle with your border radius.
#container1 {
height: 50vh;
display: flex;
justify-content: space-around;
}
#container1 > div {
flex: 0 0 23%;
}
.img-circular1,
.img-circular2,
.img-circular3 {
background-size: cover;
border-radius: 50%;
padding-bottom: 100%;
}
.img-circular1 {
background-image: url('https://i.stack.imgur.com/2C22p.jpg');
}
.img-circular2 {
background-image: url('https://i.stack.imgur.com/mBNlv.png?s=328&g=1');
}
.img-circular3 {
background-image: url('http://kenwheeler.github.io/slick/img/lazyfonz2.png');
}
<body>
<div id="navigation"></div>
<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>
<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<div id="container1">
<div><div class="img-circular1"></div></div>
<div><div class="img-circular2"></div></div>
<div><div class="img-circular3"></div></div>
</div>
<div id="content" style="margin-top: 100px;">
<p style="padding-bottom: 300px;">Helllllloooooooooo</p>
</div>
<script src="nav.js"></script>
<script src="template.js"></script>
</body>
This should come close to a satisfactory solution. I optimized some code and used shorthand notation where possible and introduced class .band as a generic container with default values. The .band content will give it it's final height.
Also, to get a nice circle I introduced a responsive width and height constraint for the images. This is necessary to force images of any arbitrary size to fit nicely in a circle (check the sizes of the dummy images!)
height: calc(0.2 * 100vmin) will result in an circle of 64px at a minimum viewport size of 320px smoothly resizing to 256px at a minimum viewport size of 1280px, called responsive sizing.
I commented the code for as far I deemed relevant, let me know if you need more explanation or just want to pick my brain (caution: it is a bit of a mess up there).
body {
max-width: 100%;
height: 100%;
margin: 0; /* remove nasty space around our page */
}
#navigation {
color: #357eca;
font-size: 1.5rem;
}
#parallax {
background-image: url("bg.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#parallax>div {
z-index: 1;
width: 50px;
height: 2px;
background: black;
margin: 0 -60px;
}
#header {
width: 50%;
padding: 15px 5% 20px 5%;
background-color: #357eca;
opacity: 0.9;
font-size: 4vw;
text-align: center;
font-weight: 900;
word-wrap: break-word;
}
h5 {
color:white;
text-align: center;
font-family: 'Montserrat';
text-transform: uppercase;
font-weight: 900;
}
.band { /* Nice grey'ish band as container */
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
max-width: 100vw; /* stay in horizontal view */
/* padding moves all content to center 70% of <body> */
padding: 2rem 15%; /* 100% - 2 * 15% = 70% width */
/* extra top/bottom spacing for clarity */
margin: 1rem 0;
}
#container1 {
justify-content: space-around; /* evenly space the images on the line */
}
[class^="img-circular"] {
height: calc(0.2 * 100vmin); /* 64px at 320 and 256px at 1280 */
width : calc(0.2 * 100vmin); /* nice responsive sizing */
background-position: center; /* center image in parent */
background-repeat: no-repeat; /* prevents repeat of image! */
background-size: cover; /* stretch/shrink to fill */
border-radius: 50%;
}
.img-circular1 { background-image: url("http://placehold.it/237x334") }
.img-circular2 { background-image: url("http://placehold.it/317x123") }
.img-circular3 { background-image: url("http://placehold.it/141x301") }
<div id="navigation" class="band">
<p>navigation</p>
</div>
<div id="parallax" class="band">
<div></div>
<h5 id="header">
<b>Welcome to RyanTeaches</b>
</h5>
<div></div>
</div>
<div class="band content">
<h2>Activities</h2>
</div>
<div id="container1" class="band">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
<div class="band content">
<p>Helllllloooooooooo</p>
</div>