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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    distorting image on mouseover

    I'm getting ready to look at redoing a div rollover effect, wherein a div expands on mouse-over and contracts back to its original size on mouse-out.

    I see two problems right now: The contained images stretch and distort with the animation. I want them to stay proportional. Also, I may need to figure out some sort of state checking? If I mouse off of the div quick enough, or several times, it'll start shrinking - I'm assuming because I moused-off before it could register anything? Not sure.

    Getting ready to look into this, and I thought I'd see if anybody here could point me in the right direction.


    Here's what I have:

    html:
    Code:
    <!-- a sample div to animate on mouseover -->
    <div class="square one" style="overflow:hidden;">
    			<div id="square_caption1" class="square_captions">The Text</div>
    			<div id="cf">
    				<img class="bottom" style="width:100%; height:100%;" src="images/1_color.jpg">
    				<img class="top" style="width:100%; height:100%;" src="images/1.jpg">
    </div>
    			
    		</div>
    jquery
    Code:
    $(".square.one,#link_nest").mouseenter(function(){
        $(".square.one").animate({height:"+=10px",width:"+=10px"},200);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
        $("#square_caption1").css('visibility','visible');
      });
      
     $(".square.one,#link_nest").mouseleave(function(){
        $(".square.one").animate({height:"-=10px",width:"-=10px"},200);
        $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
        $("#square_caption1").css('visibility','hidden');
      });
    and the css
    Code:
    #cf {
      position:relative;
      height:100%;
      width:100%;
      margin:0 auto;
    }
    
    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity .5s ease-in-out;
      -moz-transition: opacity .5s ease-in-out;
      -o-transition: opacity .5s ease-in-out;
      transition: opacity .5s ease-in-out;
    }
    Last edited by turpentyne; 03-08-2013 at 03:40 PM. Reason: adding in css

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    update

    I just managed to constrain the image by setting only one dimension of the image - at 120% of the div, and not showing overflow.

    Seems to solve this part of the problem, unless there's a reason this is a bad way to do it?

    I did it like this:

    Code:
    <div class="square one" style="overflow:hidden;">
    			<div id="square_caption1" class="square_captions">The Nest</div>
    			<div id="cf" style="overflow:hidden;">
    				<img class="bottom" style="width:120%;" src="images/the_nest_residences_1_color.jpg">
    				<img class="top" style="width:120%;" src="images/the_nest_residences_1.jpg">
    			</div>
    			
    		</div>


  •  

    Posting Permissions

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