I'm trying to make an image to open on another location on the page while its been hovered.
I looked online but didn't find a way to do that functionallty usuing only html and css.
Anyone know how to achive that?
Not hovered:
Hovered:
I tried to make another copy of the image transpert on defined area on a grid but it can't sit on top of the text.
html code:
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<aside class="place-aside">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
</aside>
</section>
css code:
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
.p-sm-img:hover {
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
Heres the code!
<!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 rel="stylesheet" href="main.css">
<title>website</title>
</head>
<body>
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<img id="bigImg">
<aside class="place-aside">
<img onmouseover="" class="p-sm-img first-last-img" src="/images/5f80f09d-6657-41af-a56c-bb2970718dfb.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/adobestock_162537886.jpeg" alt="bridge-img">
<img class="p-sm-img" src="/images/bg6.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/city-buildings-sunset-clouds-wallpaper-preview.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/helianthus-yellow-flower-pixabay_11863.jpg cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/image_large.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/photo-1448375240586-882707db888b.jpg" alt="tree-img">
</aside>
</section>
<script src="app.js"></script>
</body>
</html>
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
#bigImg {
max-width: 500px;
position: fixed;
right: 0;
top: 0;
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
a = document.querySelectorAll(".p-sm-img");
for (i in a) {
a[i].onmouseover = function (e) {
document.querySelector("#bigImg").src = this.src;
};
}
I hope open in a lightbox view help you in this case
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</div>
Related
I am working on one of my personal projects where I am designing a website for a restaurant using HTML and CSS.....I have got a code for a Carousel and I am trying to integrate it with my website....
But I am facing a problem with the carousel...As I slide down my window...the carousel also tends to move upward and doesn't stick to it's original position....How am i supposed to fix this issue....
This is the first one among all my personal projects.
I would be pleased and more than happy if the experts or members of this community would help me out in this process of learning and aid me in getting this project completed....
This is the project
This is my index.html.The code for Carousel is at the last section with the comment "Carousel Starts"
<!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" />
<title>Restaurant Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<div class="navigation container">
<div class="logo_container">
<img src="images/logo.png" alt="logo" />
</div>
<div class="allmenus">
<ul>
<li class="menu">Home</li>
<li class="menu" >About Us</li>
<li class="menu" >Our Services</li>
</ul>
</div>
</nav>
<script
src="https://kit.fontawesome.com/8b6347e91f.js"
crossorigin="anonymous"
></script>
<!--First Section-->
<div class="container" >
<div class="first">
<div class="first_image">
<img src="images/hero_image.png" alt="Vegetables" />
</div>
<div class="first_content">
<div class="tag">50% Off On All Products</div>
<h1>Enjoy Your Delicious Food</h1>
<p>
Make reservations, hours, and locations front-and-center, and
prominently get your order within few minutes of getting placed
</p>
<button class="explore">Order Now</button>
</div>
</div>
<section class="second_section" >
<div class="feature">
<img src="images/discount 1.png" />
<div class="feature_content">
<h1>Discount Voucher</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/fresh.png" />
<div class="feature_content">
<h1>Fresh Healthy Food</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/delivery.png" />
<div class="feature_content">
<h1>Instant delivery</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
</section>
</div>
<!--Popular Dishes -->
<div class="container dishes" >
<h1 class="popdishes">Our Popular Dishes</h1>
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-3.png" alt="">
<h2 class="recipe">Chicken Leg Piece</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-1.png" alt="">
<h2 class="recipe">Burger</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-2.png" alt="">
<h2 class="recipe">Chicken Nuggets</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Second SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-4.png" alt="">
<h2 class="recipe">Pizza</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-5.png" alt="">
<h2 class="recipe">Chocolate Cookies</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-6.png" alt="">
<h2 class="recipe">Broasted</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Third SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/menu-33 new.jpg" alt="">
<h2 class="recipe">Crepes</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-44.jpg" alt="">
<h2 class="recipe">Waffles</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-55.jpg" alt="">
<h2 class="recipe">Pasteries</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
</div>
<!-- Carousel Starts -->
<div class="container">
<div class="mycarousel" >
<input type="radio" name="position" checked />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<main id="carousel">
<div class="item" >
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-2.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews" >
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<main>
</div>
</div>
</body>
</html>
This is my css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
line-height: 1.4;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
nav {
box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(28, 22, 22, 0.414);
font-weight: bolder;
font-size: large;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
ul {
text-align: right;
display: flex;
font-family: Helvetica, sans-serif;
font-weight: bolder;
list-style: none;
}
li {
padding: 0 20px;
margin-top: 30px;
}
li:hover {
color: #134a7a;
text-decoration: underline;
}
.logo_container {
margin-left: 15px;
}
/* First Section */
.first {
display: flex;
gap: 100px;
justify-content: center;
align-items: center;
}
.first_content {
display: flex;
flex-direction: column;
gap: 20px;
}
.tag {
background-color: #134a7a;
align-self: flex-start;
padding: 5px 10px;
color: white;
}
.first_content h1 {
font-size: 72px;
line-height: 1.2;
font-weight: 500;
}
button {
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background: crimson;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 250px;
}
button:hover {
transition: 0.2s ease-in-out;
background:#e5eaee;
color: #134a7a;
font-weight: 500;
}
.second_section {
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 100px;
justify-content: center;
}
.feature {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 15px;
height: 165px;
background-color: #134a7a;
color: azure;
}
.feature:hover {
transition: 0.2s ease-in-out;
background-color: azure;
color:#134a7a;
}
.dishes{
background-color: #e5eaee;
margin-top: 20px;
height:1250px;
margin-bottom: 20px;;
}
.dishes .subcontainer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 25px;
}
.recipe{
font-weight: 300;
}
.section {
width: 350px;
height: 350px;
background: white;
padding-top: 32px;
margin-top: 25px;
}
.section{
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
gap: 10px;
}
h1.popdishes {
padding-top: 20px;
color:#134a7a;
text-align: center;
}
.priceandbutton {
display: flex;
flex-direction: row;
gap:10px
}
span {
padding-top: 5px;
font-weight: 400;
color:#134a7a;
font-size: 30px;
}
.addtocart{
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background:#134a7a;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 200px;
}
.addtocart:hover {
background:#e5eaee;
color: #134a7a;
font-weight: 500;
transition: 0.2s ease-in-out;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
background-color: #134a7a;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
overflow: hidden;
}
div.item:nth-of-type(1) {
--offset: 1;
}
div.item:nth-of-type(2) {
--offset: 2;
}
div.item:nth-of-type(3) {
--offset: 3;
}
div.item:nth-of-type(4) {
--offset: 4;
}
div.item:nth-of-type(5) {
--offset: 5;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
border:5px solid black;
}
.content h1{
color:#134a7a;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-color: #e5eaee;
}
div.item:nth-of-type(2) {
--offset: 2;
background-color: #e5eaee;
}
div.item:nth-of-type(3) {
--offset: 3;
background-color: #e5eaee;
}
div.item:nth-of-type(4) {
--offset: 4;
background-color: #e5eaee;
}
div.item:nth-of-type(5) {
--offset: 5;
background-color: #e5eaee;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
Try adding justify-content: space-around; so it stays the same width as the page:
.mycarousel {
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
justify-content: space-around;
}
For the slide part, I see it goes over the navbar you can solve it by adding a z-index: 1; to the navbar.
nav {
box-shadow: 5px 5px 5px rgb(1 1 1 / 5%);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
z-index: 1;
}
(I created a post that was taken down because I don't think I gave enough info or something? I added more here, including the html code that I put together. Please let me know if this is not acceptable.)
I am trying to create a horizontal carousel where you can click the images that are linked to other pages. I have tried multiple types of carousels through HTML that I found on w3schools.com and other websites, but none of them were exactly what I was looking for. Here is what I was able to put together but it just isn't what I'm looking for. It doesn't scroll through the images like a carousel. I would also like to make the images links. Any suggestions?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Lagoon">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Airport">
</div>
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Plants">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Jeep">
</div>
<div class="column">
<img class="demo cursor" src="image5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Lagoon Again">
</div>
<div class="column">
<img class="demo cursor" src="image6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Airport Again">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Here is a second one that I tried but it's just not right:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<div class="pagination">
«
<img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
»
</div>
</body>
</html>
Here are two examples of what I would want it to look like:
I am unable to change the width of the columns that are containing the thumbnails below. I want the container of the portrait images to be the size of the image the same way the container for the landscape images is equal to the image, so that there is no extra space between images. Everything I try results in a different sized image without affecting the size of the container, which always equals the dimensions of the larger landscape image. Can anyone help? Thanks.
<!DOCTYPE html>
<html>
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
margin: auto;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: white;
padding: 35px;
color: black;
font-size: 1.1em;
}
.row {
display: flex;
justify-content: center;
}
/* Six columns side by side */
.column {
float: left;
max-width: 10%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_144-109.JPG" style="height:80%" class="center">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_144-133.jpg" style="width:20%" class="center">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_free_admission.JPG" style="width:20%" class="center">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_154-043.jpg" style="height:80%" class="center">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.bartonlewisfilm.com/img_144-109.JPG" style="width:100%" onclick="currentSlide(1)" alt="144-109, Dyckman St., IND Eighth Ave. Line">
</div>
<div class="column">
<img class="demo cursor" src="https://www.bartonlewisfilm.com/img_144-133.jpg" style="width:50%" onclick="currentSlide(2)" alt="144-133, Dyckman St., IND Eighth Ave. Line">
</div>
<div class="column">
<img class="demo cursor" src="https://www.bartonlewisfilm.com/img_free_admission.JPG" style="width:50%" onclick="currentSlide(3)" alt="free admission, Greenpoint Ave., IND Crosstown Line">
</div>
<div class="column">
<img class="demo cursor" src="https://www.bartonlewisfilm.com/img_154-043.jpg" style="width:100%" onclick="currentSlide(4)" alt="154-043, 116th St., IND Eighth Ave. Line">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
I have more than 5 images.
When i click on image its expanding.
Problem is Here it should show only one light box.
All the images should be in one light box.
When i clik on images it should start sliding.
I mean all the images should be in one div.
Here is my code.
Here images are displaying individually instead of thet in one div all the images should be availbale.
Please check the link i want to display images and data like that
https://www.magicbricks.com/property-for-rent/residential-real-estate?proptype=Multistorey-Apartment,Builder-Floor-Apartment,Penthouse,Studio-Apartment,Service-Apartment,Residential-House,Villa,Paying-Guest,Hostel,Commercial-Office-Space,Office-ITPark-SEZ,Commercial-Shop,Commercial-Showroom,Commercial-Land,Industrial-Land,Warehouse/-Godown,Industrial-Building,Industrial-Shed&inputListings=I&cityName=Bangalore
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
I've found simple solution if you have a lot of pictures, you don't have to add rel to each. Just surround images with div with class e.g. lightbox-group
$(document).ready(function() {
$('div.lightbox-group').each(function(){
$(this).find('a').lightBox();
});
});
<div class="lightbox-group" id="first">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
<div class="lightbox-group" id="second">
<img src="..." />
<img src="..." />
<img src="..." />
</div>
I am developing my portfolio website but I am encountering some issues in different browsers. When I go to the website in Firefox and hover over an img element scrollbars pop up and suddenly I can scroll through the entire document (left, right, up and down). I feel like this is a Firefox issue since I only encounter this issue there and not in any other browsers.
You can find the website here nadiasportfolio.tumblr.com
$(document).ready(function() {
$("#NEW").delay(250).fadeIn(1000);
$("#MEDIA").delay(850).fadeIn(1000);
$("#NEWB").delay(1600).fadeIn(1000);
// $(".thumbnail").each(function(i){
// $(this).attr("id", "thumbnail" + i);
// });
$(".content").each(function(i) {
$(this).attr("id", "content" + i);
});
$(".thumbnail").addClass("color-hover");
$(".pdf").addClass("color-hover");
$(".content > img").addClass("color-hover");
$(".content").hide();
$("#toggleHeader").html("");
setTimeout(function() {
$("header").trigger('click');
}, 3000);
$("header").on("click", headerScrollUp);
$("header a").click(function(evt) {
evt.stopPropagation();
});
$("#toggleHeader").on("click", headerScrollDown);
$(".thumbnail").on("click", toggleContent);
$(".pdf").on("click", changeSizePDF);
});
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$(window).on("resize", function(event) {
// "if (x !== undefined){}" -> does not scroll back to horizontal 0
// but is all over the place
// if (x !== undefined) {
scrollToCurrent = ($(window).width() * 1.015 * x - $(window).width());
$("section").animate({
scrollLeft: scrollToCurrent
}, 10);
$(".pdf").children("img").css("height", "8vh").css("width", "auto").css("cursor", "zoom-in");
// }
});
var x;
var scrollToCurrent;
function headerScrollUp() {
$("header").animate({
height: "0vh"
}, 1000);
$("#toggleHeader").html("≡");
}
function headerScrollDown() {
$("header").animate({
height: "100vh"
}, 1000);
$("#toggleHeader").html("");
}
function toggleContent() {
if ($(this).next(".content").is(":hidden") === true) {
x = $(this).parent().index() + 1;
// scrollToCurrent = ($(window).width() * 1.0 * x - $(window).width());
console.log(this);
scrollToCurrent = (($(this).width() + 8) * x - ($(this).width() + 8));
$("section").animate({
scrollLeft: scrollToCurrent
}, 500);
$(this).delay(500).next(".content").show();
$(this).parent().siblings().css("opacity", "0");
$("section").css("overflow-x", "hidden");
$("section").css("overflow-y", "initial");
$("section").animate({
scrollTop: viewportHeight / 2 + "px"
}, 500);
$(".toggleText").css("transform", "scaleY(-1)");
// $(".toggleText").animate({transform: "rotate(90deg)"}, 500);
} else {
//animatie werkt niet ??
$(".toggleText").css("transform", "scaleY(1)");
$("section").animate({
scrollTop: "-=1000px"
}, 100);
$(this).delay(100).next(".content").hide();
$(this).parent().siblings().css("opacity", "100");
$("section").css("overflow-x", "initial");
$("section").css("overflow-y", "hidden");
}
}
function changeSizePDF() {
if ($(this).children("img").height() < viewportHeight / 9) {
var heightBig = $(this).children("img").height() * 9;
var widthBig = $(this).children("img").width() * 9;
$(this).children("img").animate({
height: heightBig,
width: widthBig
});
$(this).css("cursor", "zoom-out");
} else {
var heightSmall = $(this).children("img").height() / 9;
var widthSmall = $(this).children("img").width() / 9;
// var ratioToSmall = (viewportHeight / 100 * 8) * $(this).children("img").width() / $(this).children("img").height();
$(this).children("img").animate({
height: heightSmall,
width: widthSmall
});
$(this).css("cursor", "zoom-in");
}
}
.iframe-controls-container,
.iframe-controls-container--logged-in,
.tmblr-iframe,
.tmblr-iframe--desktop-logged-in-controls,
.iframe-controls--desktop {
display: none;
}
* {
margin: 0;
padding: 0;
font-weight: normal;
}
.color-hover {
filter: grayscale(255);
-webkit-filter: grayscale(255);
}
.color-hover:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
body {
color: white;
background-color: black;
font-family: helvetica;
}
h1 {
font-size: 4vw;
}
h2,
nav a {
font-size: 2.5vw;
margin: auto;
}
h3 {
font-size: 1.5vw;
margin: auto;
}
p {
font-size: 1em;
}
code {
font-family: monospace;
background-color: lightgray;
color: rgba(0, 0, 0, 0.9);
}
::-webkit-scrollbar {
width: 4px;
/* change scrollbar space */
height: 4px;
background: black;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #ff00bf, #ff00e9, #b600ff, #9000ff, #3f00ff, #0d00c9);
}
#posts {
display: none;
}
header {
background-color: #ddddff;
height: 100vh;
width: 100vw;
text-align: center;
-webkit-overflow: auto;
overflow: auto;
position: fixed;
z-index: 1;
}
header h1 {
margin-top: 40vh;
}
a {
color: white;
text-transform: uppercase;
}
nav {
position: absolute;
bottom: 1vh;
width: 100vw;
}
nav a {
margin-left: 2vw;
margin-right: 2vw;
cursor: pointer;
}
section {
height: 98vh;
white-space: nowrap;
-webkit-overflow-x: scroll;
-webkit-overflow-y: hidden;
overflow-x: scroll;
overflow-y: hidden;
}
#toggleHeader {
width: 100vw;
background: #ddddff;
opacity: 0.9;
text-align: center;
height: 2vh;
cursor: pointer;
}
article {
/* background-color: darkgray;*/
width: 100vw;
height: 99vh;
display: inline-block;
/*
border-top: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
*/
text-align: center;
}
.thumbnail {
padding: 2%;
width: 100vw;
height: 99vh;
background: radial-gradient(skyblue, midnightblue);
/* background-size: cover;*/
background-size: 50vh;
background-position: center;
background-color: white;
-webkit-overflow-y: hidden;
overflow-y: hidden;
border: 4px solid black;
}
#tn-window-of-sounds {
background-image: url("http://static.tumblr.com/6zouj6x/RyIom7lgk/window_of_sounds_logo.svg");
background-size: 50vh;
/* background-repeat: no-repeat;*/
}
#tn-lets-make {
background-image: url("https://68.media.tumblr.com/dcb2c0ecd7663664d00208b793aeec93/tumblr_ome08qJX761w34hfho3_r1_1280.png");
}
#tn-jumbo {
background-image: url("https://68.media.tumblr.com/1baf77332e4ae9873da8dbf483870f5e/tumblr_omnx7cJ38U1w34hfho2_r1_540.png");
}
#tn-do {
/*gif:*/
/* background-image: url("https://media.giphy.com/media/26FmRuwDb5eFOPDZS/source.gif");*/
/* still image:*/
background-image: url("https://68.media.tumblr.com/4a4f6f8f43e3a3d8ab6ef29967d47491/tumblr_omnu22CYIt1w34hfho1_1280.png");
}
#tn-van-gogh {
background-image: url("https://68.media.tumblr.com/fe28945f60e1d27d89b03f79661b7f1a/tumblr_omo650hbbp1w34hfho1_1280.png");
}
#tn-data-visualisation {
background-image: url("http://static.tumblr.com/6zouj6x/Yonomo9jy/ballonnen_met_mens.svg");
}
#tn-nature-tour {
background-image: url("https://68.media.tumblr.com/7e0c4cc06b662fca87201399ad134d64/tumblr_omocqygQIu1w34hfho1_1280.png");
}
#tn-insect-stamps {
background-image: url("https://68.media.tumblr.com/3c3d875629cd2ced500c9c59c288ca61/tumblr_omt5hkNls91w34hfho9_1280.jpg");
}
.textWrapper {
width: 40vw;
padding: 1vw;
margin: auto;
margin-top: 40vh;
background-color: rgba(0, 0, 0, 1);
cursor: pointer;
}
.textWrapper:hover {
font-family: monospace;
font-weight: thin;
}
.thumbnail h2 {
text-transform: uppercase;
}
.toggleText {
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/615573-200.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 7.5vw;
width: 7.5vw;
margin: auto;
margin-top: 30vh;
/* z-index: -1;*/
cursor: pointer;
}
.content {
padding-top: 5vh;
padding-bottom: 1vh;
display: none;
width: 90vw;
min-height: 500px;
position: sticky;
left: 0;
}
.content p,
.content code {
white-space: normal;
text-align: left;
}
.content p {
padding: 5vw;
padding-top: 1vh;
padding-bottom: 1vh;
}
.content>img {
max-height: 90vh;
max-width: 90vw;
visibility: visible;
}
.background-color-white {
background-color: white;
}
.pdf {
background-color: black;
-webkit-overflow: scroll;
overflow: scroll;
width: 100vw;
text-align: left;
cursor: zoom-in;
}
.pdf img {
height: 10vh;
width: auto;
}
embed {
width: 100vw;
}
.embed-code {
background-color: lightgray;
height: 40vh;
margin: 0;
}
video {
background-color: gray;
max-height: 100vh;
max-width: 100vw;
}
footer {
background-color: blue;
}
/*{CustomCSS}*/
<!DOCTYPE html>
<html>
<head>
<title>Nadias portfolio.</title>
<!-- <link rel="shortcut icon" href="{Favicon}">-->
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="keywords" content="portfolio, Nadia, van, Leur, CMD, communication, &, and, multimedia, design, jquery, student, javascript, html, css">
<meta name="author" content="Nadia van Leur">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
-->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<header>
<h1>Nadias portfolio.</h1>
<nav>
Resume
Nederlands
</nav>
</header>
<div id="toggleHeader" class="color-hover">
≡
</div>
<section>
<!--Window of Sounds app -->
<article>
<div class="thumbnail" id="tn-window-of-sounds">
<div class="textWrapper">
<h2>Window of Sounds</h2>
<h3>Think further than the frame.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content1">
<p>Window of Sounds is an app created for Het Noordbrabants Museum. A museum about the art history of Noord-Brabant.<br></p><br>
<img src="foto mensen koptelefoon"><br>
<img src="foto mensen koptelefoon"><br>
<img src="foto mensen koptelefoon"><br>
<embed class="embed-code" src="http://static.tumblr.com/6zouj6x/nSiomo27n/index.js.txt">
</div>
</article>
<!-- Visuele identiteit Let's Make -->
<article>
<div class="thumbnail" id="tn-lets-make">
<div class="textWrapper">
<h2>Let's Make</h2>
<h3>Visual Identity.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content2">
<p>Test tekst2</p><br>
<img src="https://68.media.tumblr.com/23c916b7cf86e27103acee1e21bc6938/tumblr_ome08qJX761w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/30c0e288a6e406d54792441f9c498c75/tumblr_ome08qJX761w34hfho2_1280.png">
</div>
</article>
<!--Jumbo shopping app -->
<article>
<div class="thumbnail" id="tn-jumbo">
<div class="textWrapper">
<h2>Shopping app design</h2>
<h3>Jumbo supermarket.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content3">
<p>Test tekst3</p><br>
<div class="pdf">
<img src="https://68.media.tumblr.com/1baf77332e4ae9873da8dbf483870f5e/tumblr_omnx7cJ38U1w34hfho2_r1_1280.png">
<img src="https://68.media.tumblr.com/07340d2e8a0fa3279d19685c5d2efe2a/tumblr_omo0gfTM8I1w34hfho9_1280.png">
<img src="https://68.media.tumblr.com/589f872342e4900461e3feb9779d0276/tumblr_omnx7cJ38U1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/71d4d216751e80c4ff59cb16be2f8676/tumblr_omo0gfTM8I1w34hfho8_1280.png">
<img src="https://68.media.tumblr.com/5b9968c37295813a3321dc5c965e6c96/tumblr_omo0gfTM8I1w34hfho10_1280.png">
<img src="https://68.media.tumblr.com/ea1523e56ac76ae2b2bc35ab5a035823/tumblr_omo0gfTM8I1w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/aa814e094d3aeead9106393b7a644d05/tumblr_omo0gfTM8I1w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/02add0021cf9bae65d227056e133b45e/tumblr_omo0gfTM8I1w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/1eea370bdf68eabeec685f4609b8660d/tumblr_omo0gfTM8I1w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/65b545b972450f03be3aed4f91fb58ba/tumblr_omo0gfTM8I1w34hfho5_1280.png">
<img src="https://68.media.tumblr.com/8eaaa91a977d9d9f083375f9c25b296d/tumblr_omo0gfTM8I1w34hfho4_1280.png">
<img src="https://68.media.tumblr.com/4452fecce1b47f3eb3785c4634154f71/tumblr_omo0gfTM8I1w34hfho1_1280.png">
</div>
<div class="pdf">
<!-- wireframes-->
<img src="https://68.media.tumblr.com/bd85af7bc33d967c3bc1d2c3a652cb0c/tumblr_omob6m2joz1w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/99379cfa879f8933b324dc19ec1eff40/tumblr_omob6m2joz1w34hfho4_1280.png">
<img src="https://68.media.tumblr.com/b93a861e995036681bca011466728e12/tumblr_omob6m2joz1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/b65291e59aafa734d45e71afe6577471/tumblr_omob6m2joz1w34hfho3_1280.png">
</div>
<div class="pdf">
<!-- flowchart-->
<img src="https://68.media.tumblr.com/5cf04fbf473771e3ad12bc35c37ef9df/tumblr_omoa1vsBJz1w34hfho1_1280.png" class="background-color-white">
</div>
</div>
</article>
<!--Do - to do list -->
<article>
<div class="thumbnail" id="tn-do">
<div class="textWrapper">
<h2>Do</h2>
<h3>Your interactive planning buddy.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content4">
<p>Test tekst3</p><br>
<video controls>
<source src="https://nadiasportfolio1.tumblr.com/video_file/t:iXG2gnAz8wfzNTNiBot6bQ/158063052645/tumblr_ome2pg5G361w34hfh/480" type="video/mp4">
</video><br>
<embed class="embed-code" src="http://static.tumblr.com/6zouj6x/u8xomeeab/code_week_7.5.txt">
</div>
</article>
<!--Van Gogh museum concept -->
<article>
<div class="thumbnail" id="tn-van-gogh">
<div class="textWrapper">
<h2>Vincent van Gogh</h2>
<h3>Museum concept.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content5">
<p>Test tekst3</p><br>
<img src="https://68.media.tumblr.com/fe28945f60e1d27d89b03f79661b7f1a/tumblr_omo650hbbp1w34hfho1_1280.png"><br>
<img src="https://68.media.tumblr.com/35adcb40d7794ff87a24f6c1137dea18/tumblr_omo650hbbp1w34hfho3_r1_1280.png"><br>
<img src="https://68.media.tumblr.com/1aefc3bee07b76fbc2a77e42ea21987c/tumblr_omo650hbbp1w34hfho2_r1_1280.png">
</div>
</article>
<!--Festival data visualisation -->
<article>
<div class="thumbnail" id="tn-data-visualisation">
<div class="textWrapper">
<h2>Festival fun</h2>
<h3>Data visualisation.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content6">
<p>Test tekst3</p><br>
<img src="http://static.tumblr.com/6zouj6x/ZMgomo9ik/ballonnen.svg"> <br>
<img src="http://static.tumblr.com/6zouj6x/Yonomo9jy/ballonnen_met_mens.svg">
</div>
</article>
<!--nature tour concept -->
<article>
<div class="thumbnail" id="tn-nature-tour">
<div class="textWrapper">
<h2>Nature tour</h2>
<h3>Hybrid reality studying.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content7">
<p>Test tekst3</p><br>
<img src="https://68.media.tumblr.com/7e0c4cc06b662fca87201399ad134d64/tumblr_omocqygQIu1w34hfho1_1280.png"> <br>
<img src="https://68.media.tumblr.com/696f84dadfdbe32a27e465cc32587644/tumblr_omocqygQIu1w34hfho2_1280.png">
</div>
</article>
<!-- Insect stamps -->
<article>
<div class="thumbnail" id="tn-insect-stamps">
<div class="textWrapper">
<h2>Insect stamps</h2>
<h3>Print design.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content8">
<p>Test tekst3</p><br>
<div class="pdf">
<img src="https://68.media.tumblr.com/41d9fb6e284ba7f2b3250c3ab6df237f/tumblr_omt5bdemab1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/d1353684775c941d446f27cbbcbe2e20/tumblr_omt5bdemab1w34hfho2_1280.jpg">
<img src="https://68.media.tumblr.com/5a7049422a210bfd6662cca2715dec61/tumblr_omt5bdemab1w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/f907bae2cb23340dac25a7fcee2086b7/tumblr_omt5bdemab1w34hfho4_1280.jpg">
<img src="https://68.media.tumblr.com/08c51ac81196e4cf97f07d440b187f97/tumblr_omt5bdemab1w34hfho5_1280.jpg">
<img src="https://68.media.tumblr.com/b723a80f40b6a47b1685cbb211ceffe5/tumblr_omt5bdemab1w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/13e4fecf712f10b17456c13a9f60f9f9/tumblr_omt5bdemab1w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/65c627320107a02f7d611b1cec67cea6/tumblr_omt5bdemab1w34hfho8_1280.png">
<img src="https://68.media.tumblr.com/47785b763eafda7a6efa7debaaf03d06/tumblr_omt5bdemab1w34hfho10_1280.png">
<img src="https://68.media.tumblr.com/a2770b062c2b80146c4101fb85d03194/tumblr_omt5bdemab1w34hfho9_1280.png">
<img src="https://68.media.tumblr.com/53c925ddb870b2e548e8a542799a2a54/tumblr_omt5hkNls91w34hfho1_1280.jpg">
<img src="https://68.media.tumblr.com/182f16489d01d846c55c3a9022b52ddb/tumblr_omt5hkNls91w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/a63baa1ad66ed76657b0a440bc072c18/tumblr_omt5hkNls91w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/18574a0a546a587c946b8d1fbd057acb/tumblr_omt5hkNls91w34hfho4_1280.jpg">
<img src="https://68.media.tumblr.com/1c11c92fdd5d594a10b036eb7e8bac48/tumblr_omt5hkNls91w34hfho5_1280.jpg">
<img src="https://68.media.tumblr.com/c2b54fedf1b2903071aca31beba48dbb/tumblr_omt5hkNls91w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/2f138adcce9e7b9f884797a5e368863d/tumblr_omt5hkNls91w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/80a6230cd93c50508bd99bdc9902eaeb/tumblr_omt5hkNls91w34hfho8_1280.jpg">
<img src="https://68.media.tumblr.com/3c3d875629cd2ced500c9c59c288ca61/tumblr_omt5hkNls91w34hfho9_1280.jpg">
</div>
</div>
</article>
</section>
<footer>
</footer>
</body>
</html>