[Solved] Why are images not showing on website?

by


You can use this code:

$(function() {
  $(".img-w").each(function() {
    $(this).wrap("<div class="img-c"></div>")
    let imgSrc = $(this).find("img").attr("src");
     $(this).css('background-image', 'url(' + imgSrc + ')');
  })
            
  
  $(".img-c").click(function() {
    let w = $(this).outerWidth()
    let h = $(this).outerHeight()
    let x = $(this).offset().left
    let y = $(this).offset().top
    
    
    $(".active").not($(this)).remove()
    let copy = $(this).clone();
    copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
    $(".active").css('top', y - 8);
    $(".active").css('left', x - 8);
    
      setTimeout(function() {
    copy.addClass("positioned")
  }, 0)
    
  }) 
  
  

  
})

$(document).on("click", ".img-c.active", function() {
  let copy = $(this)
  copy.removeClass("positioned active").addClass("postactive")
  setTimeout(function() {
    copy.remove();
  }, 500)
})
html,
body {
	margin: 0;
	padding: 0;
}
.all {
	width: 100%;
}
.center {
  transform: translate(-50%);
  position: absolute;
  top: 100px;
  left: 50%;
}

.paint {
	padding-top: 55%;
	font-family: 'Quicksand';
	font-size: 30px;
}

.menu {
	background-color: transparent;
	width: 100%;
}

.menu a {
	float: right;
	display: block;
	color: black;
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	text-decoration: none;
	font-size: 17px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.menu a:hover {
	background-color: #ddd;
	color: black;
}

.menu .icon {
	display: none;
}
@-ms-viewport{
  width: device-width;
}
@media screen and (max-width: 600px) {
	.menu a:not(:last-child) {
		display: none;
	}
	.menu a.icon {
		float: right;
		display: block;
	
	}
}

@media screen and (max-width: 600px) {
	.menu.responsive {
		position: relative;
	}
	.menu.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.menu.responsive a {
		float: none;
		display: block;
		text-align: middle;
	}
}
body {
  padding: 30px 0;
  position: relative;
}

.gallery {
  width: 600px;
  margin: auto;
  border-radius: 3px;
  overflow: hidden;
  //position: relative;
}
.img-c {
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 2;
  //transform: translateX(-50%);
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackoverflow.com/questions/44301843/css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="all">
  <div class="menu" id="myMenu">
   <a href="#contact">Contact</a>
   <a href="#about">About</a>
   <a href="#myart">My Art</a>
   <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
   
  <div class="center">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/15/3c/38/153c381fbb537893047153bad1819568.jpg">
  </div>
  <br>
  <div class="paint" style="text-align: center;">
   <p>MY ART </p>
  </div>
<div class="gallery">
  <div class="img-w">
    <img src="https://images.unsplash.com/photo-1485766410122-1b403edb53db?dpr=1&auto=format&fit=crop&w=1500&h=846&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485793997698-baba81bf21ab?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485871800663-71856dc09ec4?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485871882310-4ecdab8a6f94?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485872304698-0537e003288d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485872325464-50f17b82075a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1470171119584-533105644520?dpr=1&auto=format&fit=crop&w=1500&h=886&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485881787686-9314a2bc8f9b?dpr=1&auto=format&fit=crop&w=1500&h=969&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485889397316-8393dd065127?dpr=1&auto=format&fit=crop&w=1500&h=843&q=80&cs=tinysrgb&crop=" alt="" /></div>
</div>  </div>


</body>
</html>

6

solved Why are images not showing on website?