SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Image Pop Up On Background Image

    Hello

    I have been following this example code

    http://webdesigninfo.wordpress.com/2...viewer-in-css/

    to get this css image effect

    http://settysantu.googlepages.com/pop-up-in-css.html

    Their example img is in the HTML script. However, the img I want to use it on is presentational so I have the img applied as a background-image to a div on my page through my css style sheet.

    I have been messing about with the example code to try to get it to work with my background-image but with no luck.

    I've got myself in a muddle now, am I missing something massively basic?

    Cheers

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Test changing that code to something like this:
    Code:
    .spiderpic{
    	position: relative;
    	display:block;
    	border: 1px solid black;
    	padding: 5px;
    	height: 48px;
    	width: 48px;
    	background: white url(http://a.wordpress.com/avatar/settysantu-48.jpg) center no-repeat;
    	text-decoration: none;
    }
    .spiderpic span{
    	position: absolute;
    	top: 0;
    	left: -1000px;
    	border: 1px solid black;
    	padding: 5px;
    	height: 475px;
    	width: 633px;
    	background: white url(http://www.stumbleupon.com/mainpics/2725502.jpg) center no-repeat;
    	visibility: hidden;
    	color: black;
    }
    .spiderpic:hover span{
    	visibility: visible;
    	left: 60px;
    }
    HTML Code:
    <a class="spiderpic" href="http://webdesigninfo.wordpress.com/"><span></span></a>
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yay! It works! Thank you!

    But not on Opera 9.5 for some reason?

    I have not got access to IE 6 or 7 at the minute to test on, is there a problem with IE and the hover states?

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fujiprovince View Post
    But not on Opera 9.5 for some reason?

    I have not got access to IE 6 or 7 at the minute to test on, is there a problem with IE and the hover states?
    I just tested in latest Opera 9.5 and it is working like in all other major browsers,

    except IE6 that needs this declaration added:
    Code:
    .spiderpic:hover{
    	visibility: visible;
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reset my mac and now it works in Opera 9.5, that was the first time I reset it since I installed the 9.5 update earlier today, so guess it was something to do with that.

    Thank you so much! You have been a great help


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
  •