CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Peter
Peter

Reputation: 17

Animate plus icon bootstrap from bottom to center to the div

i Have a box with an image and a darken div that set the image opacity to 0.7 for apply a dark background on hover, but i want to appear a plus icon from bottom to center with an animation on hover too. Now it only do a fade, but i want to move appearing from bottom to center on hover too.

HTML CODE:

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 paddinganuncios box">
            <div class="headnaranja">
                <h3><img class="calendar" src="images/trans.gif" alt="responsive" />28 Octubre 2014</h3>
              </div>
              <a href="#" class="darken">
                <img src="images/b1.jpg" class="img-responsive b1" alt="B1 image">
                 <div class="overlay">
                <div class="more">
                    <span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true">
                    </span>
                </div>
            </div>

                                 </a>
            <div class="desc">Gran representación de Aje Extremadura en la 56 jornada corresponsables.
            </div>
    </div>

JQuery CODE (I tried it but it doesn't work good):

  $(".darken").hover(function(){  
    $(".plus-box").animate({ 
        top: "-=30px",
      }, 500 );

      });

CSS CODE:

a.darken:hover img {
    opacity: 0.7;

}

a.darken {
    display: block;
    background: black;
    padding: 0;
}


.overlay {  
        opacity:0;    
        position: absolute;
        top: 15%;
        left: 44%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

.box:hover {
  -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;


    }
.box:hover .overlay {
        opacity:1;
    }

.box:hover .b1 {
        opacity: 0.5;
    }

Thanks.

Upvotes: 1

Views: 430

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

Is CSS transition not what you look for ?

a.darken:hover img {
  opacity: 0.7;
}
.b1 {
  vertical-align:middle;
  display:inline-block!important;
}
a.darken {
  display: block;
  background: black;
  padding: 0;
  overflow:hidden;
}
div.overlay { 
  position:relative;
  top:60%;
  display:inline-block!important;
  vertical-align:middle;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.box:hover .overlay {
  opacity:1;
  top:0;
}
.box:hover .b1 {
  opacity: 0.5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 paddinganuncios box">
            <div class="headnaranja">
                <h3><img class="calendar" src="images/trans.gif" alt="responsive" />28 Octubre 2014</h3>
              </div>
              <a href="#" class="darken">
                <img src="http://lorempixel.com/400/100" class="img-responsive b1" alt="B1 image">
                 <div class="overlay">
                <div class="more">
                    <span class="glyphicon glyphicon-plus-sign plus-box" aria-hidden="true"></span>
                </div>
            </div>

                                 </a>
            <div class="desc">Gran representación de Aje Extremadura en la 56 jornada corresponsables.
            </div>
    </div>

Upvotes: 0

Related Questions