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.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    6
    Member #
    19333
    I'm looking at the "Projects" part of www.secondstory.com and I'm trying to figure out how they did that with the gallery so that when you mouseover it both outlines the image and highlights the text on the right. I feel that it must be fairly simple, but I'm pretty new at this and can't figure out how it's done. Can anyone help me figure it out and how I would replicate this effect?

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    As with any website, you can view the HTML, CSS and Javascripting.

    If you view the HTML, then view this CSS file:
    http://www.secondstory.com/css/main.css

    I just don't have enough time to pick-out the DIV and Classes that are used.
    But it's all done with CSS. Maybe someone has time to create a small demo for you?


  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    6
    Member #
    19333
    Quote Originally Posted by mlseim
    As with any website, you can view the HTML, CSS and Javascripting.

    If you view the HTML, then view this CSS file:
    http://www.secondstory.com/css/main.css

    I just don't have enough time to pick-out the DIV and Classes that are used.
    But it's all done with CSS. Maybe someone has time to create a small demo for you?
    Thanks - even looking at the code, I still can't pinpoint exactly how it was done and which part of the code shows how it works. I found the part of the HTML that contains this:

    <div class="featured_projects">
    <div class="clearfix playlist_overview_thumbs">
    <a id="workthumb_1" href="/portfolio/lists/theme/featured-projects/on-the-water"><img alt="On the Water: Stories from Maritime America" src="/assets/images/000/007/231/7231_thumb.jpg" /></a><a id="workthumb_2" href="/portfolio/lists/theme/featured-projects/shifting-boundaries"><img alt="Shifting Boundaries" src="/assets/images/000/007/251/7251_thumb.jpg" /></a><a id="workthumb_3" href="/portfolio/lists/theme/featured-projects/beach-stories"><img alt="Beach Stories" src="/assets/images/000/007/213/7213_thumb.jpg" /></a><a id="workthumb_4" href="/portfolio/lists/theme/featured-projects/marion-davies-guest-house"><img alt="The Marion Davies Guest House" src="/assets/images/000/007/217/7217_thumb.jpg" /></a><a id="workthumb_5" href="/portfolio/lists/theme/featured-projects/music-genres-table"><img alt="Music Genres Table" src="/assets/images/000/004/727/4727_thumb.jpg" /></a><a id="workthumb_6" href="/portfolio/lists/theme/featured-projects/in-the-studio"><img alt="In the Studio" src="/assets/images/000/004/699/4699_thumb.jpg" /></a><a id="workthumb_7" href="/portfolio/lists/theme/featured-projects/bank-of-america-market-data-mirrors"><img alt="Bank of America Market Data Mirrors" src="/assets/images/000/004/783/4783_thumb.jpg" /></a><a id="workthumb_8" href="/portfolio/lists/theme/featured-projects/myloc"><img alt="myLOC" src="/assets/images/000/004/731/4731_thumb.jpg" /></a><a id="workthumb_9" href="/portfolio/lists/theme/featured-projects/weave-building"><img alt="Weave Building" src="/assets/images/000/006/645/6645_thumb.jpg" /></a><a id="workthumb_10" href="/portfolio/lists/theme/featured-projects/oregon-timeweb"><img alt="Oregon TimeWeb" src="/assets/images/000/004/772/4772_thumb.jpg" /></a><a id="workthumb_11" href="/portfolio/lists/theme/featured-projects/armies-at-gettysburg-battle-maps"><img alt="Armies at Gettysburg Battle Maps" src="/assets/images/000/005/063/5063_thumb.jpg" /></a><a id="workthumb_12" href="/portfolio/lists/theme/featured-projects/digital-vaults"><img alt="Digital Vaults" src="/assets/images/000/005/122/5122_thumb.jpg" /></a> </div>
    <div class="sidebar">
    <div class="title">
    <a class="homepage_link" href="/portfolio/lists/theme/featured-projects">Featured Projects</a> </div>
    <div class="description"><p>Explore recent projects that showcase the studio’s range of capabilities and diversity of work. View them all in a playlist or select each individually.</p></div>
    <div class="playlist_overview_list">
    <a id="worklist_1" href="/portfolio/lists/theme/featured-projects/on-the-water"><span class="list_row"><span class="index">01</span><span class="name"> On the Water: Stories from Maritime America</span></span></a><a id="worklist_2" href="/portfolio/lists/theme/featured-projects/shifting-boundaries"><span class="list_row"><span class="index">02</span><span class="name"> Shifting Boundaries</span></span></a><a id="worklist_3" href="/portfolio/lists/theme/featured-projects/beach-stories"><span class="list_row"><span class="index">03</span><span class="name"> Beach Stories</span></span></a><a id="worklist_4" href="/portfolio/lists/theme/featured-projects/marion-davies-guest-house"><span class="list_row"><span class="index">04</span><span class="name"> The Marion Davies Guest House</span></span></a><a id="worklist_5" href="/portfolio/lists/theme/featured-projects/music-genres-table"><span class="list_row"><span class="index">05</span><span class="name"> Music Genres Table</span></span></a><a id="worklist_6" href="/portfolio/lists/theme/featured-projects/in-the-studio"><span class="list_row"><span class="index">06</span><span class="name"> In the Studio</span></span></a><a id="worklist_7" href="/portfolio/lists/theme/featured-projects/bank-of-america-market-data-mirrors"><span class="list_row"><span class="index">07</span><span class="name"> Bank of America Market Data Mirrors</span></span></a><a id="worklist_8" href="/portfolio/lists/theme/featured-projects/myloc"><span class="list_row"><span class="index">08</span><span class="name"> myLOC</span></span></a><a id="worklist_9" href="/portfolio/lists/theme/featured-projects/weave-building"><span class="list_row"><span class="index">09</span><span class="name"> Weave Building</span></span></a><a id="worklist_10" href="/portfolio/lists/theme/featured-projects/oregon-timeweb"><span class="list_row"><span class="index">10</span><span class="name"> Oregon TimeWeb</span></span></a><a id="worklist_11" href="/portfolio/lists/theme/featured-projects/armies-at-gettysburg-battle-maps"><span class="list_row"><span class="index">11</span><span class="name"> Armies at Gettysburg Battle Maps</span></span></a><a id="worklist_12" href="/portfolio/lists/theme/featured-projects/digital-vaults"><span class="list_row"><span class="index">12</span><span class="name"> Digital Vaults</span></span></a> </div>
    </div>

    </div>
    but I'm having trouble figuring out how the CSS works to achieve this effect.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I also realized that what they're doing doesn't work with IE6.0
    You may not want to use their method because of that.

    Look into this:
    http://www.bosrup.com/web/overlib/

    You can do the same thing.



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:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com