Help with CSS and HTML for a newbie?

[Motus]

So I am new to web design and am in the process of learning. A friend recommended that I snag a template and start playing with it to learn the basics. I grabbed a free version of Type&Grids and it has been going pretty smoothly until now.

What I am trying to do is make an image enlarge with hover using the tutorial here: Enlarge Image On Hover CSS3 Demos | Grains of Sand - CSS & HTML5 Demos & Templates

The problem is that when I get to the end my images don't enlarge; they have the shadow, box, and text but are the same size as the thumbnail. I tried to copy and paste his code exactly then just input my images but the same thing happens..

What am I doing wrong or missing? is there an easier way to do this? Any help is really appreciated.

BTW I am using Brackets to edit all the files and make the process easier.

[Vapr_Arts]

We need to see your code to understand whats going on


Sent from my iPhone using Tapatalk

[Motus]

Sure, so this is what I copy and pasted because what I wrote wasn't working. This does the same thing that I wrote and what I described above.

HTML:
<ul class="enlarge">
<li><img src="images/IMG_0301%201thumb.jpeg" width="150px" height="100px" alt="Passive" /><span><img src="images/IMG_0301%201.JPG" alt="Passive" /><br />Beginning a passive rainwater collection system.</span></li>
<li><img src="assets/image-enlarge02-sml.jpg" width="150px" height="100px" alt="Blackpool sunset" /><span><img src="assets/image-enlarge02.jpg" alt="Blackpool sunset" /><br /></span></li>
<li><img src="assets/image-enlarge03-sml.jpg" width="150px" height="100px" alt="Blackpool pier" /><span><img src="assets/image-enlarge03.jpg" alt="Blackpool pier" /><br /></span></li>
</ul>

And here is the CSS:


ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 50; /*resets the stack order of the list items - later we'll increase this*/
margin:10px 40px 0 20px;
}
ul.enlarge img{
background-color:#e7f9f3;
padding: 6px;
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#e7f9f3;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center;
color: #495a62;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
}
ul.enlarge li:hover{
z-index: 50;
cursorointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li:hover span{
top: -200px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -100px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -100px;
}
/**IE Hacks - see CSS3 PIE: CSS3 decorations for IE for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
behavior: url(pie/PIE.htc);
}

[sasha_bolcina]

Are you sure the name of your image is "IMG_0301%201thumb.jpeg" ? Can you see images on the page?

And, do you have PIE downloaded and on the path? For testing purposes you can remove part starting with /**IE Hacks... as it is used for IE < version 10 to draw circled corners.

[Vapr_Arts]

Like sasha said id start with checking paths n making sure everything is right on that end first.

I assume you do not have a host? Its so much simpler for us to help you out and pretty damn cheap now a days.. I can understand not wanting to spend the money in the beginning, but as soon as you can its a good thing to have!

So again check all the image names n then double check them. If those are correct make sure the paths are correct.

Your assets folder should be in the same folder as your Index.html


Sent from my iPhone using Tapatalk

[Motus]

Yes I do have PIE and on path. I can see the correct image but it is not enlarging.

I do have a host but I am still trying to figure out how to get the folder uploaded...this is definitely making me feel ignorant as hell.

[Vapr_Arts]

Yes I do have PIE and on path. I can see the correct image but it is not enlarging.

I do have a host but I am still trying to figure out how to get the folder uploaded...this is definitely making me feel ignorant as hell.

Dont put yourself down man everyone has to start somewhere! I may not have asked this forum a billion questions but just like everyone else here we were born knowin code. (Other than the Game, I'm pretty sure he was using asp.net straight out the womb)

Does your host have a FTP option? If so download something like Filezilla and ill try and help you get that situated tomorrow night if someone does do it first.


Sent from my iPhone using Tapatalk

[Motus]

Yeah I'm using Godaddy. I uploaded my folder to the public_ftp but I'm stuck now...

[sasha_bolcina]

Ok, I've had a deeper look at your code. There are many errors in syntax.
If you are setting image dimensions in attribute you don't need 'px', just number.
So,
<img src="http://www.webdesignforums.net/forum/images/IMG_0301%201thumb.jpeg" width="150" height="100" alt="Passive" />
or
<img src="http://www.webdesignforums.net/forum/images/IMG_0301%201thumb.jpeg" style="width:150px; height:100px;" alt="Passive" />

I would rename image to something without url encoded chars, like "img_0301-1thumb.jpeg", just to avoid any risk...

There are double parenthesis in css:

ul.enlarge span{
...
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); /* should be ... rgba(0,0,0, .75); */
...
}


I tried it on my side after changes, and it didn't work until I set correct path to images on my machine.

[Motus]

Ok, I've had a deeper look at your code. There are many errors in syntax.
If you are setting image dimensions in attribute you don't need 'px', just number.
So,
<img src="http://www.webdesignforums.net/forum/images/IMG_0301%201thumb.jpeg" width="150" height="100" alt="Passive" />
or
<img src="http://www.webdesignforums.net/forum/images/IMG_0301%201thumb.jpeg" style="width:150px; height:100px;" alt="Passive" />

I would rename image to something without url encoded chars, like "img_0301-1thumb.jpeg", just to avoid any risk...

There are double parenthesis in css:

ul.enlarge span{
...
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); /* should be ... rgba(0,0,0, .75); */
...
}


I tried it on my side after changes, and it didn't work until I set correct path to images on my machine.

Nice catch. It is still doing the same thing. Does it fully enlarge your images or only make it slightly larger?