I have a "lightbox" type og image viewer that I'm using to navigate through some images.
The images have different aspect ratio, and I need to put the arrows on the edge. When I resize the websize the images follows the size of the webpage, which is very good
However, the arrows are just floating away from the image :( Any ideas?
body {
background-image: url("../img/bg-masthead.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
}
.modal {
position: fixed;
width: 100%;
height: 1000%;
background-color: rgba(0, 0, 0, 0.4);
/* display: none; */
}
.modal-content {
display: inline-block;
width: 95%;
height: 95%;
position: fixed;
top: 40px;
left: 50%;
transform: translate(-50%, 0);
}
img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.prev {
top: 50%;
left: 8px;
}
.close {
top: 4px;
right: 8px;
}
.next {
top: 50%;
right: 8px;
}
.arrow {
position: absolute;
color: white;
font-weight: bold;
font-size: 50px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<title>Bilde galleri</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div id="lightBox" class="modal">
<div class="modal-content" id="img_container">
<img id="largeImg" src="images/2007/Malayisa/IMG_0243.jpg">
<div class="prev arrow" onclick="plusSlides(-1)">❮</div>
<div class="next arrow" onclick="plusSlides(1)">❯</div>
<div class="close arrow" onclick="document.getElementById('lightBox').style.display='none'">×</div>
</div>
</div>
</body>
</html>
Related
i got a problem with my code. Everytime i move my page the text is on a completly other position and overlows the most of the time. i am pretty new to coding and i really dont know how to fix it at all.
This is my HTMl data.
html,
body {
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.filter {
backdrop-filter: blur(2px);
height: 100%;
width: 100%;
z-index: 1;
}
.container {
display: flex;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 40%;
height: 20%;
padding: 20px;
text-align: center;
}
.item {
border: solid 0px;
position: relative;
left: 34%;
top: 0%;
padding: 2%;
text-align: center;
color: white;
z-index: 2;
font-size: 90%;
}
#text {
position: relative;
left: 0%;
padding: 1%;
top: 30%;
z-index: 2;
color: white;
text-align: center;
font-size: 180%;
}
#media only screen and (max-width:70%) {
.container {
width: 100%;
}
}
<head>
<meta charset="UTF-8" />
<meta hrrp-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./test-txt.css">
<title>Tomorrow x Together</title>
</head>
<body>
<div class="filter"></div>
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</video>
</body>
i really dont know how to fix it. i also tried to just dont use a flexbox. but i think my Knowledges for that arent good enough xD
i also tried to vary between flex-directions, flex-wraps between different width, heights. to work with and without a div.
I did everything for me possible.
I see it is a mix of position, z-index, flex, percentages, etc. It is difficult to find out what the question is. It seems you want to center a box but I'm not sure. If this is the case, try this as starting point.
But again, to help you out please give some extra info about the required layout.
* {
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
background-image: url('./pics-txt/group/Need2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.view {
display: flex;
width: 100%;
min-height: 100%;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.center-container {
width: 40%;
height: 20%;
margin: auto; /* center in middle */
background-color: rgba(0, 0, 0, 0.4);
}
.container {
display: flex;
padding-bottom: 10px;
border: 3px solid #f1f1f1;
color: white;
font-weight: bold;
text-align: center;
/* transform: translate(-50%, -50%); */
}
#media only screen and (max-width: 600px) {
.center-container {
width: 100%;
}
}
.item {
width: 33.333%;
padding: 2%;
/* z-index: 2; */
color: white;
font-size: 90%;
}
#text {
padding: 1%;
/* z-index: 2; */
color: white;
text-align: center;
font-size: 180%;
}
<body>
<div class="view">
<div class="center-container">
<div class="container">
<div class='item'>MOA</div>
<div class="item">Member</div>
<div class="item">Big Hit</div>
</div>
<h1 id="text">Tomorrow x Together</h1>
</div>
</div>
</body>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!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">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
click for screenshot of problem....
on window screen everything is ok but responsive sizes, my image overflow on html.
i set the image as background of a div for parallex; how can i fix the overflowing side? i work more than 4 hours please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="Utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WonderWoman</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div class="rellax hero-image" data-rellax-speed="0"></div>
<div class=" rellax parallax-el" data-rellax-speed="-1"></div>
<div class="rellax logo" data-rellax-speed="12"></div>
<div class="rellax wonder" data-rellax-speed="7"></div>
<div class="rellax woman" data-rellax-speed="5"></div>
<div class="rellax clouds" data-rellax-speed="0"></div>
</body>
</html>
in css, i gave images as background to divs.
i gave background to all divs to make parallax scrolling. it is working but overflow still there.
html , body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#fff;
overflow-x: hidden;
overflow: hidden;
scroll-behavior: smooth;
}
.bg-light {
background: none !important;
}
.navbar{
z-index: 1000;
}
.navbar-brand {
margin-left: 25px;
margin-top: 25px;
}
.navbar-nav a{
color: white !important;
letter-spacing: 1px;
padding: 1px;
margin-right: 30px;
}
.hero-image{
width: 100%;
background: url(backg.jpg) no-repeat 50% 50%;
height: 100vh;
background-size: cover;
position: absolute;
z-index: 0;
}
.parallax-el {
background: url(woman.png) no-repeat 50% 50%;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
left:30%;
z-index: 2;
overflow: hidden;
}
.logo {
background: url(wlogo.png) no-repeat 50% 50%;
background-size: contain;
width: 100%;
height: 40%;
position: absolute;
top:42%;
z-index: 1;
}
.clouds {
width: 100%;
background: url(sparkle.png) no-repeat 50% 50%;
height: 100vh;
background-size: cover;
position: absolute;
z-index: 3;
opacity: 0.3;
}
.whitespace{
width: 100%;
height: 100vh;
}
.content {
background: #fff;
height: 100vh;
width: 100%;
margin: 0 auto;
padding: 80px 0;
font-family:Arial, Helvetica, sans-serif;
height: 100vh;
position: absolute;
z-index:1000;
}
.wonder{
background: url(wondertext.png) no-repeat 50% 50%;
background-size: contain;
width: 25%;
height: 100%;
position: absolute;
left: 33%;
top:5%;
z-index: 1;
}
.woman{
background: url(WOMANtext.png) no-repeat 50% 50%;
background-size: contain;
width: 30%;
height: 100%;
position: absolute;
left: 30%;
top:15%;
z-index: 1;
}
Make it left: 0 on smaller screens.
I have a page involving 2 responsive images next to each other (they automatically change their size while maintaining aspect ratio, when browser is resized), which works great for desktop. However, I want them to automatically align on top of each other on mobile phones: One image should be at the top while the other moves below it.
How can I do this? Help is appreciated.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container {
position: relative;
width: 50%;
}
.image1 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.image2 {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #A4CE8C;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
opacity: 0.5;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text1 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.text2 {
white-space: nowrap;
color: #006400;
font-size: 7vw;
position: absolute;
overflow: hidden;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container col-sm-6" style="float:right; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img2re2.jpg" alt="Avatar" class="image1 img-responsive">
<div class="overlay" >
<div class="text1"><b>S Marble</b></div>
</div>
</div>
<div class="container col-sm-6" style="float:left; margin: 1px 0px 0px 0px; min-width: 50%;">
<img src="C:\Users\User\Google Drive\SGroup\Website\img1re222.jpg" alt="Avatar" class="image2 img-responsive">
<div class="overlay">
<div class="text2"><b>S Steel</b></div>
</div>
</div>
</body>
</html>
You can use #media rule for detecting the screen size and the code the desired for mobile
Eg:
#media only screen and (max-width: 768px) {
.container {
display:flex;
flex-direction: column;
}
}
This might be a little bulky,
Basically, I like how I have laid out this page, but when I resize the window, since I used position: relative, a lot of the elements overlap once the window is small enough. Additionally, it's usually standard (based on websites I have visited) that when resizing, elements are fixed and that you'd just have to scroll to get to the elements that are off screen, but in this case I have everything scaling with the window size. I am not sure if elements scaling with the screen are a good or bad design, however I would like to fix the overlapping issue. And if it is poor design to scale the elements, I would appreciate any suggestions as to achieving the same result with no scaling.
I have replaced most of the background content with solid colors. Also, I understand that a lot of what I may have already and will do in the future may be shortened with JavaScript, however I still need to learn it :)
Any suggestions regarding structure of classes, headers, tags etc. would be very helpful, this is only my second day of html/css. I am currently looking for online resources regarding these topics!
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
font-family: Open Sans;
color: #FFFFFF;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.6;
}
a:hover {
opacity: 1;
}
h1 {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
opacity: 0.5;
font-size: 3vw;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
border: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
footer {
position: fixed;
bottom: 5vh;
right: 1.5vw;
}
#background-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: green;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#background2-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: red;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#intro .button {
position: fixed;
padding: 0;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 12px;
top: 50%;
transform: translate(0%, -50%);
width: 20vw;
height: 25vh;
transition: all 0.3s ease 0s;
opacity: 0.5;
border-color: black;
border-style: solid;
}
.button.english {
background-image: url('../images/uk_flag.png');
left: 15vw;
}
.button.portuguese {
background-image: url('../images/angola_flag.png');
right: 15vw;
}
.button.english div {
position: absolute;
top: 100%;
left: 48%;
transform: translate(-50%, 0);
color: white;
font-size: 4vw;
}
.button.portuguese div {
position: absolute;
top: 100%;
left: 49%;
transform: translate(-50%, 0);
color: white;
font-size: 3.5vw;
}
#welcome .button {
position: fixed;
padding: 0;
background-position: center center;
opacity: 0.7;
border-color: rgba(255, 255, 255, 0.5);
border-color: white;
border-style: solid;
border-radius: 12px;
width: 20vw;
height: 25vh;
top: 50%;
transform: translateY(-50%);
max-height: 80px;
max-width: 20vw;
}
.button.buy {
left: 15vw;
}
.button.sell {
right: 15vw;
}
.button.buy div,
.button.sell div {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
}
#intro .button:hover,
#welcome .button:hover {
opacity: 1;
border-color: white;
}
.button.buy:hover~#background-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
.button.sell:hover~#background2-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
#videoback {
position: fixed;
top: -64px;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
opacity: 0.2;
}
<!doctype html>
<html lang="en">
<head>
<title>AB</title>
<link href="styles/intro.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<link href="welcome.html" rel="alternate" hreflang="en" />
<link href="welcome_pt.html" rel="alternate" hreflang="pt" />
</head>
<body id="welcome">
<a href="home.html" class="button buy" hreflang="en">
<div>Buy</div>
</a>
<a href="apply.html" class="button sell" hreflang="en">
<div>Sell</div>
</a>
<div id="background-div"></div>
<div id="background2-div"></div>
<video autoplay muted loop id="videoback">
<source src="videos/blessings.mp4" type="video/mp4">
</video>
<footer>
<div>
<nav>
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
<!-- Scripts -->
</body>
</html>
If I understand it correctly, you can solve your problem using bootstrap:
Link it in your html as such:
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Use bootstrap to define rows and their column size:
<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->
<div class="container">
<!-- elements that will be displayed next to each other -->
<div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div class="row">
<!-- three elements that will always be shown next to each other-->
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
</div>
...
</div>
Learn more about bootstrap:
quick tutorial for your needs
Get started with bootstrap 3