CODEWITHSUNDEEP
jqueryhtmlcss
user2328659
user2328659

Reputation: 71

Make border fade in/out on hover?

Is there an easy way to fade a CSS border-bottom onto my image on hover, and have said border fade out again when not hovered anymore?

<div class="hover">
<img src="images/ex.jpg"/>
</div>

Upvotes: 1

Views: 3820

Answers (4)

Milad
Milad

Reputation: 859

 div.mosueover{
  border-bottom: 5px solid rgba(50,50,50,1);

  transition: /*all*/ border-color 1s ease-in-out;
  -moz-transition: /*all*/ border-color 1s ease-in-out;
  -o-transition: /*all*/ border-color 1s ease-in-out;
  -webkit-transition: /*all*/ border-color 1s ease-in-out;
}

div.mosueover:hover {
  border-color: rgba(50,50,50,0.5);
}

Upvotes: 0

Mike
Mike

Reputation: 894

You don't need to use JQUERY for this

In your CSS Style sheet, make this entry.

div.hover {
      border-bottom: 5px solid rgba(0,0,0,0);

      transition: border-color 1s linear;
      -moz-transition: border-color 1s linear;    /* FF3.7+ */
      -o-transition: border-color 1s linear;      /* Opera 10.5 */
      -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
    }

    div.hover:hover {
      border-color: rgba(1,1,1,1);
    }

CLICK HERE---------->Check my JSFIDDLE to see how it works.<----------CLICK HERE

Upvotes: 3

YSK .CO
YSK .CO

Reputation: 164

CSS: 

.hover {
    border-bottom:none;
    transition: border-bottom 1s;
    -webkit-transition: border-bottom 1s;
{

.hover:hover {
    border-bottom: 3px solid #888;
}

This would work more fluently over the Javascript method

Upvotes: 1

RealDeepak
RealDeepak

Reputation: 863

Your HTML Code:

<div class="hover">
    <img src="images/ex.jpg"/>
</div>

Your Jquery Code:

$(function(){
  $(".hover").hover(
      function(){
          $(this).css({'border-bottom':'1px solid #888', opacity: '0.8'}); 
      },
      function(){
          $(this).css('border-bottom', 'none'); 
      }
  );                             
});

Upvotes: 1

Related Questions