Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23
  1. #1
    Junior Member Motus's Avatar
    Join Date
    Jul 2015
    Posts
    10
    Member #
    51232

    Help with CSS and HTML for a newbie?

    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.

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    We need to see your code to understand whats going on


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member Motus's Avatar
    Join Date
    Jul 2015
    Posts
    10
    Member #
    51232
    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);
    }

  5. #4
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    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.

  6. #5
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    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

  7. #6
    Junior Member Motus's Avatar
    Join Date
    Jul 2015
    Posts
    10
    Member #
    51232
    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.

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    Help with CSS and HTML for a newbie?

    Quote Originally Posted by Motus View Post
    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

  9. #8
    Junior Member Motus's Avatar
    Join Date
    Jul 2015
    Posts
    10
    Member #
    51232
    Yeah I'm using Godaddy. I uploaded my folder to the public_ftp but I'm stuck now...

  10. #9
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    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.
    Last edited by sasha_bolcina; Jul 23rd, 2015 at 03:45 PM.

  11. #10
    Junior Member Motus's Avatar
    Join Date
    Jul 2015
    Posts
    10
    Member #
    51232
    Quote Originally Posted by sasha_bolcina View Post
    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?


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com