-4

Images after "my art" part are not showing. Cursor is changing when you slide under the MY ART. So images are probably there, but not showing. The problem might be in css, but i cant find it.

https://codepen.io/anon/pen/oWKKVj

Im new in HTML, CSS and Java. I took this part from free galleries. https://codepen.io/wunnle/pen/ZLomgG

Please don't yell at me if i made smth stupid. Im trying to make a website for my classes. 

<p> help </p>
Kinga
  • 1
  • 5

3 Answers3

0

Because it cant find the image you're assigning. 

   <img src="https://placeimg.com/640/480/tech"/>

placeimg is a generated image.

I made some edits to your codepen and forked it.

You also didnt include jquery.

https://codepen.io/anon/pen/awooQB

ImAtWar
  • 1,073
  • 3
  • 11
  • 23
  • jquery? u made images appear i get it (cuz of placeming) but why my images dont want to show, even if i have them in same location file as html? – Kinga Jun 01 '17 at 08:28
  • I think your images are not in te same directory as your html file. – ImAtWar Jun 01 '17 at 08:29
0

In your codepen example you have the following

 <div class="gallery">
  <div class="img-w"><img src="1.jpg" alt="image" /></div>
  <div class="img-w"><img src="2.jpg" alt="image" /></div>
  <div class="img-w"><img src="3.jpg" alt="image" /></div>
  <div class="img-w"><img src="4.jpg" alt="image" /></div>
  <div class="img-w"><img src="5.jpg" alt="image" /></div>
  <div class="img-w"><img src="6.jpg" alt="image" /></div>
  <div class="img-w"><img src="7.jpg" alt="image" /></div>
  <div class="img-w"><img src="sunset.jpg" alt="image" /></div>
  <div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>

For the images to show in your webpage, the files must be saved in the same location as the html file. So, make sure the images 1.jpg, 2.jpg etc are in the same folder as your html file and they should display as you want them to.

Additionally, using relative paths (i.e. that refer to a file relative to the html by only providing a partial path) like this will mean that your images will never show up on codepen as it has no access to the images.

To make images show up on codepen you need to publish them to the internet somehow (beyond the scope of this question) and use the full URL to the published image (it should start with http:// or https://)

On looking at the CSS though you also have

.img-w img {
  display: none;
}

Removing the display:none means the images are displayed, however, i think you want to get the JQuery to work so you should add references to JQuery to your HTML file and then the images will be displayed as per the example below:

Snippet: 

$(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 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.gallery {
  width: 100%;
  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;
}

.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;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
</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="painter.png">
  </div>
  
  <div class="paint">
  <center>
   <p>MY ART </p>
   </center>
  </div>
 <div class="gallery">
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
  <div class="img-w"><img src="4.jpg" alt="image" /></div>
  <div class="img-w"><img src="5.jpg" alt="image" /></div>
  <div class="img-w"><img src="6.jpg" alt="image" /></div>
  <div class="img-w"><img src="7.jpg" alt="image" /></div>
  <div class="img-w"><img src="sunset.jpg" alt="image" /></div>
  <div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>
  </div>


</body>
</html>

The answer to this question linking jquery in html shows you how to add JQuery to your HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Please note these are old files and should be replaced with the current versions of JQuery.

lejlun
  • 4,140
  • 2
  • 15
  • 31
Mauro
  • 4,531
  • 3
  • 30
  • 56
0

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="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>
James Douglas
  • 3,328
  • 2
  • 22
  • 43