I want to resize the image to bigger than the original size when the I click on the images. link http://plnkr.co/edit/JBTE1RAEZburUTRkVrLE?p=preview. This sample when click on image, it is pop up but the same the original size. How can I set it bigger.
Below the Code:
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
By assigning the desired size of images to the div .viewer like below .viewer img{width:600px} you are forcing images to resize to the to fit the size wanted. below the working snippet.
// Code goes here
function view(src)
{
var viewer = document.getElementById("viewer");
viewer.innerHTML ='<img src="' + src + '" id="img"/>';
var img = document.getElementById("img");
var iw=0, ih=0;
var dw=0, dh=0;
img.onload=function(){
document.getElementById("ov").style.display="block";
viewer.style.display="block";
document.getElementById("nav").style.display="block";
iw = viewer.offsetWidth;
ih = viewer.offsetHeight;
dw = window.innerWidth;
dh = window.innerHeight;
viewer.style.top = parseInt(dh/2-ih/2) + "px";
viewer.style.left = parseInt(dw/2-iw/2) + "px";
};
}
function hide2()
{
document.getElementById("viewer").style.display="none";
document.getElementById("ov").style.display="none";
document.getElementById("nav").style.display="none";
}
/* Styles go here */
ul.image-list{
padding:0;
margin: 0;
list-style: none;
}
ul.image-list li{
display: inline-block;
}
ul.image-list li img{
width: 190px;
min-width: 70px;
transition: all ease 0.4s;
}
ul.image-list li img:hover{
cursor: pointer;
opacity: 0.5;
border: 1px solid #000;
}
.pup
{
width: 100%; height: 100%;
background: #666;
opacity: 0.7;
position: fixed;
top: 0px; left: 0px;
z-index: 111;
display: none;
}
.viewer{
background: #666; padding: 12px;
position: fixed; z-index: 222;
text-align: center;
display: none;
}
#nav{
display: none;
z-index: 333;
color: #FFF;
position: relative;
cursor: pointer; text-align: center;
}
.viewer img{
width:600px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid gallery">
<div class="row-fluid">
<div class="col-sm-12">
<h3 class="text-info">Photo Gallery</h3>
</div>
</div>
<div class="row-fluid">
<div class="col-sm-12">
<ul class="image-list">
<li><img src="http://lorempixel.com/400/200/animals/6" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/2" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/3" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li>
<li><img src="http://lorempixel.com/400/200/animals/4" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li>
</ul>
<div class="slider-controls" id="nav">
<span class="previous glyphicon glyphicon-arrow-left" id="prev" onclick="prev()"></span>
<span class="next glyphicon glyphicon-arrow-right" id="next" onclick="next()"></span>
</div>
</div>
</div>
</div>
<div class="pup" id="ov" onclick="hide2()">
</div>
<div class="viewer"id="viewer">
</div>
</body>
</html>
I also suggest adding the following code so you can have it responsive on mobile for better surfing:
#media screen and (max-width: 600px) {
.viewer{
width:100%;
}
.viewer img{
width:100%;
}
}
Related
enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>
I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp
I am having some Issues with how my images are aligned on my website.
1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left.
2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
You can find my code at https://codepen.io/anon/pen/mpKvMx
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
h1 {
color: red;
}
h2 {
color:red;
}
p {
font-family: Arial;
}
body {
background-color: grey;
}
div {
text-align: justify;
}
div img {
display: inline-block;
width: auto;
max-height: 200px;
height: auto;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
<html>
<title>Title</title>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 align=center>Heading</h1>
<h2 align=center>Sub-Heading</h2>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
</head>
<br>
<br>
<body>
<div class="image123">
<div class="imgContainer">
<img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div>
</div>
</div><br>
</body>
</html>
1) All you need is to add the following css to the element you want to align horizontally: margin: 0 auto;
2) Use media queries, so for example you can have:
on mobile: all the images stacked (you may need width:100% on your image container)
for wider viewports: images inlined as in your code sample
If you are not confortable with media queries please see the following example: https://codepen.io/TrentWalton/pen/kqxDy.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SOS</title>
<link href="first.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script><script src="http://use.edgefonts.net/amatic-sc:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('images/slideshow1_over.jpg','images/slideshow2_over.jpg','images/slideshow3_over.jpg','images/news1_over.png','images/news2_over.png')">
<div id="container">
<div id="navbar">
<img src="images/logo.png" alt="" width="230" height="70" class="floatleft" id="logo"/>
<div id="menu">
<ul><li>HOME</li>
<li>ABOUT US</li>
<li>ABOUT ORANGUTANS</li>
<li>
OUR WORK
<ul>
<li>PROJECTS</li>
<li>CAMPAIGNS</li>
</ul>
</li>
<li>DONATE</li>
<li>CONTACT US</li>
<li>SHOP</li>
</ul>
</div>
</div>
<div class="slideshow">
<div><img src="images/slideshow1.jpg" alt="" width="1105" height="576" usemap="#Map" id="Image1"/>
<map name="Map">
<area shape="rect" coords="698,440,1070,544" href="#" onMouseOver="MM_swapImage('Image1','','images/slideshow1_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow2.jpg" alt="" width="1105" height="576" usemap="#Map2" id="Image2"/>
<map name="Map2">
<area shape="rect" coords="734,438,1058,542" href="#" onMouseOver="MM_swapImage('Image2','','images/slideshow2_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/slideshow3.jpg" alt="" width="1105" height="576" usemap="#Map3" id="Image3"/>
<map name="Map3">
<area shape="rect" coords="730,436,1058,544" href="#" onMouseOver="MM_swapImage('Image3','','images/slideshow3_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div class="news">
<div><img src="images/news1.png" alt="" width="638" height="322" usemap="#Map4" id="Image4"/>
<map name="Map4">
<area shape="rect" coords="440,262,612,286" href="http://www.takepart.com/article/2015/10/22/orangutans-are-dying-indonesia-burns" target="_blank" onMouseOver="MM_swapImage('Image4','','images/news1_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
<div><img src="images/news2.png" alt="" width="638" height="322" usemap="#Map5" id="Image5"/>
<map name="Map5">
<area shape="rect" coords="444,264,608,284" href="http://www.eco-business.com/news/palm-oil-expands-in-aceh/" target="_blank" onMouseOver="MM_swapImage('Image5','','images/news2_over.png',1)" onMouseOut="MM_swapImgRestore()">
</map>
</div>
</div>
<div id="video">
<div id="iframe">
<iframe width="435" height="280" src="https://www.youtube.com/embed/SE_Gw9GzdZY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<img src="images/footer.png" width="1105" height="64" alt=""/></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
</body>
<script type="text/javascript">
$('.slideshow').slick({autoplay:true,fade:false, dots:true, arrows:false});
$('.news').slick({autoplay:true,fade:true, dots:false, arrows:true});
</script>
</html>
#charset "UTF-8";
html {
margin:0px;
padding:0px;
}
body {
background-image:url(images/background3.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
margin:0px;
padding:0px;
}
#container {
width:1105px;
margin:0 auto;
}
#navbar {
background-color: rgba(0,0,0,0.70);
width:1105px;
height:100px;
}
ul {
po
display: inline;
list-style-type:none;
}
ul li {
font-weight: 400;
font-size: 27px;
display: inline-block;
margin-right: 0px;
position: relative;
padding: 19px 20px 27px 28px;
cursor: pointer;
font-family: amatic-sc;
font-style: normal;
color: #F2F2F2;
}
ul li:hover {
color: #fff;
text-shadow: 0px 0px 10px #13F909;
}
ul li:hover li{
text-shadow: none;
}
ul li ul {
position: absolute;
padding:0;
width: 150px;
top:80px;
left:0;
visibility: hidden;
}
ul li ul li {
background-color:rgba(0,0,0,0.70);
display: block;
color: #fff;
}
ul li ul li:hover { background-color:rgba(0,0,0,0.70); text-shadow: 0px 0px 10px #13F909; }
ul li:hover > ul {
visibility: visible;
}
ul.sub{
top:0;
left:154px;
visibility:hidden;
}
.floatleft{
float:left;
}
#logo {
margin-top:15px;
margin-left:20px;
}
#menu {
position:relative;
z-index:100;
padding-top:4px;
}
.slideshow {
padding-top:20px;
}
.news {
width:638px;
height:322px;
float:left;
}
#video {
background-color:rgba(0,0,0,0.70);
width:458px;
height:322px;
margin-left:647px;
position:absolute;
}
#iframe {
padding-top:21px;
padding-left:11.5px;
}
#footer {
bottom:50px;
}
Above is my code and essentially, my footer div includes an image that acts as my footer however, it is not sitting flush with the bottom of my page. I tried putting negative margin, padding and bottom and it did not move.
Here is an image to show the problem clearer, http://imgur.com/rk4DOuk
Everyone will ask you to use the footer with position:absolute; bottom:0px; and body with height:100%; margin:0px; so I'll suggest you a flex alternative to stick the footer on the bottom of the page without to set it to 'absolute':
body {
height: 100vh;
width:100%;
margin:0px;
}
#bigcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
flex-direction: column;
min-height: 100%;
background: plum;
}
#footer {
background: indigo;
width: 100%;
height: auto;
text-align: center;
-webkit-flex: 0 0 64px;
flex: 0 0 64px;
}
#picture {
vertical-align: bottom;
width: 100%;
height: 64px;
}
#content_container {
margin-left: 15px;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
<div id=bigcontainer>
<div id="content_container">
<h1>Sticky Footer</h1>
<p>text_A</p><p>text_B</p><p>text_C</p><p>text_D</p><p>text_E</p>
</div>
<div id="footer">
<img id="picture" src="http://i.imgur.com/T6Q4PMw.png" alt=""/>
</div>
</div>
Please add these style in css. Hope it will work.
html, body {
height: 100%;
}
I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.