WordPress.org

Ready to get started?Download WordPress

Forums

Hover Image
Images floated side by side don't display correct images (1 post)

  1. navyspitfire
    Member
    Posted 12 months ago #

    I'm trying to float images side by side and having a hard time getting it right.

    I'm using WP-Types to create an active and rollover image, then pluging the [himage] code into the post content.

    <p><a href="#">[himage][types field="dribbble-active" align="none"][/types][types field="dribbble-rollover" align="none"][/types][/himage]</a></p>
    <p><a href="#">[himage][types field="twitter-active" align="none"][/types][types field="twitter-rollover" align="none"][/types][/himage]</a></p>
    <p><a href="#">[himage][types field="linkedin-active" align="none"][/types][types field="linkedin-rollover" align="none"][/types][/himage]</a></p>

    As it stands now only the first image changes to it's rollover image when I hover, and the others start with their rollover image by default. Also, the first image doesn't even show up, but is the same exact image as the last image in the code.

    CSS

    .social {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    }
    
    .icons {
    	overflow: hidden;
    }
    
    .icons img {
    	float: left;
    	display: inline-block;
    	margin: 0 0.5em 0 0;
    }

    HTML

    <div class="social">
    			<div class="caps">
    				<div id="wpcf-field-social-heading" class="wpcf-field-textfield wpcf-field-social-heading"><span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-social-heading-value">Lorem Ipsum Bacon</span></div>			</div>
    
    			<div class="icons">
    				<p><a href="http://dribbble.com/alexflannery"><style>
    .himage
    {
    	-webkit-transition: opacity .000000001s linear 0s;
    	-moz-transition: opacity .000000001s linear 0s;
    	-o-transition: opacity .000000001s linear 0s;
    	transition: opacity .000000001s linear 0s;
    }
    </style><div style="position:relative;"><img src="http://localhost/wp-content/uploads/Dribbble_Rollover.png" width="" height="" /><img class="himage" src="http://localhost/wp-content/uploads/Dribbble_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
    <p><a href="http://twitter.com/OhFlannery"><style>
    .himage
    {
    	-webkit-transition: opacity .000000001s linear 0s;
    	-moz-transition: opacity .000000001s linear 0s;
    	-o-transition: opacity .000000001s linear 0s;
    	transition: opacity .000000001s linear 0s;
    }
    </style><div style="position:relative;"><img src="http://localhost/wp-content/uploads/Twitter_RollOver.png" width="" height="" /><img class="himage" src="http://localhost/wp-content/uploads/Twitter_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
    <p><a href="#"><style>
    .himage
    {
    	-webkit-transition: opacity .000000001s linear 0s;
    	-moz-transition: opacity .000000001s linear 0s;
    	-o-transition: opacity .000000001s linear 0s;
    	transition: opacity .000000001s linear 0s;
    }
    </style><div style="position:relative;"><img src="http://localhost/wp-content/uploads/LinkedIn_RollOver.png" width="" height="" /><img class="himage" src="http://localhost/wp-content/uploads/LinkedIn_Idle.png" width="" height="" onmouseover="this.style.opacity=0;" onmouseout="this.style.opacity=1;" style="position:absolute; top:0; left:0;" /></div></a></p>
    			</div>
    		</div> <!-- end .SOCIAL -->

Reply

You must log in to post.

About this Plugin

About this Topic

  • RSS feed for this topic
  • Started 12 months ago by navyspitfire
  • This topic is not resolved
  • WordPress version: 3.5.2