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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Location
    San Francisco, CA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Making an image link with a mouseover

    Hello,

    I'm trying to create an image link that has text and an opacity change when it's hovered over. I got the hover state down, but the image isn't linking. I've checked the file name and extensions, but it's still not an image link.

    You can preview it here when you hover and click on the first image (the one that says Photo Manipulations when you hover over it).

    http://www.shelbybonilla.com/imaging.html

    Here is the html code:

    Code:
     <div class="box1">
    <a href="photomanipulations.html">
       <img src="images/god_portrait_thumbnail.png" />
    </a>
    
      <div class="text"><p>Photo Manipulations</p>
      </div>  
    </div>
    Here is the css:

    Code:
     
    .box1 {
    	width: 270px;
    	height: 270px;
    	float: left; 
    	margin-right: 25px;
    	margin-bottom: 25px;
    	
      
    }
    
    .box1:hover .text {
    	background:rgba(255, 255, 255, .9);
    	   
    }
    
    .text {
    	display:none;
        width:100%;
        height:100%;
        position:absolute;
        top:0; left:0;
        text-align:center;
    	color:000;
    }
    
    img:hover .text {
    	visibility:visible;
    	width: 270px;
    	height: 270px;
    	margin: auto;
    	
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,701
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You have to either make it img:hover + .text (’cause .text is the next sibling of the image, not a child) or make it a:hover .text (because .text is a child of the anchors, not the images, make sense?)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Location
    San Francisco, CA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure what you mean. Would you mind posting the code?

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,708
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Shelby_Bonilla,

    and a warm welcome to these forums. ;

    check out this link for a possible solution...

    coothead


  •  

    Tags for this Thread

    Posting Permissions

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