Results 1 to 6 of 6

Thread: Border Around Image (with Caption) Changing on Hover+

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Question Border Around Image (with Caption) Changing on Hover+

    Hi,

    I would like to put a border around an image that has a caption under it that only lights up on hovering. And also have the caption change colors on hovering.
    The border needs to be around the image and caption together.

    Emulating what is going on here.
    http://www.ideo.com/work/
    If you scroll down over the project photos area. Hovering over the image area, including the text "zone", makes a border appear.

    So far I have used this CSS styling to add a border and place a caption.
    Code:
    		.project-image {
    		  float: left;
    		  padding: 5px;
    		  border: 1px solid #fff;
    		  margin: 5px;
    		}
    		
    		.project-image p {
    		  margin-top: -5px;
    		  text-align: right;
    		  font-style: italic;
    		  text-indent: 0;
    		  font-weight:700;
    		}
    HTML:
    Code:
            <div class="project-image">
                <img src="somephoto.jpg" alt="somephoto" width="200" height="100">
                <p>photo caption</p>
            </div>
    I tried, in error, to make styles for .project-image a / .project-image a:hover, but they didn't work at all.

    I need to mention that I need the caption to move around with the image, so they can't be statically located one on top of the other.

    I'm not "superwellversed" in CSS/HTML... but this page is doctype HTML 5.

    Thank you!
    Last edited by Beverleyh; 05-12-2013 at 11:19 AM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Your CSS suggestions would need to work on an anchor tag, which you don't have in your markup, so that's why they aren't proving fruitful. You have the right idea with the :hover pseudoclass though so it should be fixed with something like this;
    Code:
    .project-image:hover {
    ...
    }
    
    .project-image p:hover {
    ...
    }
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    questions (05-12-2013)

  4. #3
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Awesome! That works!

    And in fact, because the whole area of the border, including the caption text is "selected" on hover, I don't need to put the second "p:hover" style in.

    I can put the color change of the paragraph text in the "image:hover" style. Actually necessary, so the text color changes while hovering anywhere over the area.

    Code:
    		.project-image:hover {
    		  padding: 5px;
    		  border: 1px solid #000;
    		  margin: 10px;
    		  color: #00f;
    		}
    Thank you so much... this could have taken hours... days to guess to figure out!

  5. #4
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    I am going to open this up again because something funny is now happening with this styling.

    The area of the page these images are in won't actually contain them.
    Meaning, I tried to put a background or border color to the area of the page they are in, and the area shows up as being "0" pixels tall, instead of being the height of a container that holds all the images.

    CSS:
    Code:
    	#project-menu-area {
    		position: relative;
    		width: 1180px;
    		margin: 0 auto;
    		background-color:#069;
                    border: 1px dashed #ccc;
    		}
    
                   .project-image {
    		  float: left;
    		  padding: 7px;
    		  border: 1px dashed #ccc;
    		  margin: 16px 8px 0;
    		  color: #8e8c96;
    		}
    		
    		.project-image p {
    		  margin-top: -5px;
    		  text-align: right;
    		  font-style: italic;
    		  text-indent: 0;
    		  font-weight:700;
    		  margin-bottom: 5px;
    		}
    		
    		.project-image:hover {
    		  padding: 7px;
    		  border: 1px solid #ee3824;
    		  margin: 16px 8px 0;
    		  color: #ee3824;
    		  background: #fff;
    		}

    If the HTML is like this, no background or border color shows of the "project-menu-area" area because the area looks to be "0" pixels tall:
    Code:
    <div id="project-menu-area">
            
        <div class="project-image">
            <a href="link1.html"><img src="photo1.jpg" alt="photo name 1" width="200" height="100"></a>
            <p>caption</p>
        </div>       
        <div class="project-image">
            <a href="link2.html"><img src="photo2.jpg" alt="photo name 2" width="200" height="100"></a>
            <p>caption</p>
        </div>
        <div class="project-image">
            <a href="link3.html"><img src="photo3.jpg" alt="photo name 3" width="200" height="100"></a>
            <p>caption</p>
        </div>       
        <div class="project-image">
            <a href="link4.html"><img src="photo4.jpg" alt="photo name 4" width="200" height="100"></a>
            <p>caption</p>
        </div> 
    
    </div>
    HOWEVER, if the HTML is like this, without the "div class" styling for the images/links, then the background color and border color of the "project-menu-area" show, because the area looks to be the height of the zone behind all these images:
    Code:
    <div id="project-menu-area">
    
            <a href="link1.html"><img src="photo1.jpg" alt="photo name 1" width="200" height="100"></a>
    
            <a href="link2.html"><img src="photo2.jpg" alt="photo name 2" width="200" height="100"></a>
    
            <a href="link3.html"><img src="photo3.jpg" alt="photo name 3" width="200" height="100"></a>
    
            <a href="link4.html"><img src="photo4.jpg" alt="photo name 4" width="200" height="100"></a>
    
    </div>
    It's really weird...

    AND, I should mention, even thought the border and background color of the "project-menu-area" don't show, the width and auto margin styles are recognized and work.

    Thanks!

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Yeh, that's a nice little side effect of floated elements (you have "float-left" on the .project-image class) - causing the container div to collapse around them.

    You have to clear the floats, either by adding something like <br style="clear:both" /> after the last floated element or by setting overflow:auto; on the #project-menu-area container div.

    Here's some reference info that helps to explain it: http://www.quirksmode.org/css/clearing.html
    Last edited by Beverleyh; 05-14-2013 at 11:30 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    questions (05-14-2013)

  8. #6
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Right... who would have known!

    This didn't work, I tried putting in several places:
    Quote Originally Posted by Beverleyh View Post
    <br style="clear:both" />
    This DID work, though:
    Quote Originally Posted by Beverleyh View Post
    setting overflow:auto; on the #project-menu-area container div
    BUT only after I also specified height: 100% (for the #project-menu-area container div).

    Thank you so much!

Similar Threads

  1. Image CSS border hover effect on PHP Photo Album Script V2
    By Beverleyh in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-28-2010, 12:10 PM
  2. Changing border color on Ultimate Image Slideshow?
    By jackofall in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-06-2008, 10:40 PM
  3. Lightbox II - changing color of caption text
    By alanross in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-24-2006, 02:22 AM
  4. a:hover border problem
    By mickwine in forum CSS
    Replies: 1
    Last Post: 06-27-2006, 10:36 AM
  5. Replies: 2
    Last Post: 01-22-2006, 01:29 PM

Tags for this Thread

Bookmarks

Posting Permissions

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