Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post

    css hover images with text

    Hey all-

    I really love the multiple photos with hovered text here: http://www.widmanski.com/. I've read over their code and i'm not quite certain how it was done. Honestly, i don't really want to just copy the code i'd like to learn. I tried google searching and i'm not sure how to do the text over the image like that...

    i've found this:http://designshack.net/tutorialexamp...nds/index.html

    but that won't work. suggestions?

  • #2
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I took a quick look at http://www.widmanski.com/ coding. It looks like they used a combination of JQuery and JavaScript to get all the effects that they wanted such as the background fading effect on rollover. I've been learning that it takes a lot of time and effort to really learn web development, even if it's just the front end.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,575
    Thanks
    23
    Thanked 643 Times in 642 Posts
    @catkustes, easy method: Make two images one normal the other with the name over it. Use the hover effect to exchange the images.

  • Users who have thanked sunfighter for this post:

    catkustes (10-12-2012)

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks all! I do remember reading about the hover effect. I'll probably need help later on it all, but at least I have a better idea of where to start. THANKS!

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    hey! so i started with a css image gallery.

    i tried creating separate div classes for each photo so i can position them differently. when i tried it with the first one (400x400 image) all the other photos go below that photo but they all continue to align left. i want them to be closer together (all centered) and then fit together like a jigsaw puzzle.

    any tips/suggestions/tutorials you could recommend. i mean i've read a lot of them but i'm not quite certain how to put it all together. any help you can give me would be greatly appreciated, thanks!!

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Sincerely Curious</title>
    <head>
    <style type="text/css">

    body {background-color:white;}
    p {color:#635149;}
    p{font-family:"baskerville", Times, serif;}
    p {text align:center}
    div.ex
    {
    padding:1px;
    border:1px;
    margin:0px;
    background:#BBFFFF;
    }

    #navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 35px;
    text-align: left;
    padding-top: 15px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: #635149;
    color: rgba(1, 1, 1, 0.8);
    }
    #navigation a {
    font-size: 14px;
    font-family: "baskerville";
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
    }
    .circles {
    float: left;
    height: 200px; width: 200px;
    background-color: #eee;
    margin: 0 50px 50px 0;

    /*Make it a circle*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    }
    #navigation a:hover {
    color: grey;
    }
    div.img
    {
    margin: 1px;
    height: auto;
    width: auto;
    float: left;
    }
    div.img img
    {
    display: inline;
    margin: 0px;
    border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    }
    #image1 { position: absolute; center: 10px; bottom: 10px; }
    </style>
    </head>
    <header>
    <header role="banner">
    <br>
    <br>
    <br>
    <div id="navigation">
    <a href="default.asp">Facebook</a><a href="news.asp">Linked In</a></li><a href="contact.asp">Twitter</a><a href="about.asp">About</a>
    </ul>
    <br>
    <br>
    <br>
    <div class="image1">
    <a target="_blank" href="klematis_big.htm"><img src="http://farm9.staticflickr.com/8478/8180827722_ff1986f9cf.jpg" alt="Klematis" width="400" height="400"></a>
    </div>
    <div class="img">
    <a target="_blank" href="klematis2_big.htm"><img src="http://farm9.staticflickr.com/8201/8180827776_f9be43dd1e_m.jpg" width="225" height="225"></a>
    <div class="desc"></div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis3_big.htm"><img src="http://farm9.staticflickr.com/8486/8180792207_9b075d1e15_m.jpg" alt="Klematis" width="175" height="175"></a>
    <div class="desc"></div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis4_big.htm"><img src="http://farm9.staticflickr.com/8344/8180827824_9d873ac95b.jpg" alt="Klematis" width="200" height="600"></a>
    <div class="desc"></div>
    <br>
    <br>
    </header>
    <body>
    <center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>
    </div>
    <div class="ex">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>
    This should be an opening paragraph to my insatiable and unfortunately intangible love affair with curiosity.
    <br>It should be sensible and not mention ninjas or my love of cute fluffy thang thangs.</br></p>

    <p>
    This should talk about my work. How I am a freak and actually like to work.
    <br>How it’s really the only thing that matters to me because seriously, life sucks. Merp. This is just a joke, holla!</br>
    </p>
    <p>
    In closing I should tell people that I can work limited freelance projects or give them high fives for cheap tricks.
    <br>Hey, why not! It’s what the cool kids do! </br></div>
    </p>
    </body>



    </footer>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •