CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pipeline
Pipeline

Reputation: 1059

Animating text to appear from the bottom up html/css

I currently have my text appearing when a user hovers over it in the following manner:

.item{

  color: transparent;
  font-weight: bold;
  text-align: center;

}

And then in my JQuery over hover I set the color to black:

 $(".item").hover(function () {
    $(this).css("color", "black");
}, function () {
    $(this).css("color", "transparent");
});

I ask however, if there is some sort of webkit-animation or some scrolling feature I am unaware of if I wanted to have the text when the div is hovered scroll from the bottom of the div into its place in the middle or at whatever location it resides at

I am looking at past answers and I am finding some very long and complicated answers for this and was hoping for something easy I am overlooking.

Upvotes: 0

Views: 3218

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9664

Using CSS transition

JS Fiddle

.item {
  width: 300px;
  height: 300px;
  outline: 1px solid skyblue;
  margin: 5px;
  text-align: center;
}
.item .content {
  position: relative;
  top: 270px;
  /* 270px top + 30px line height = 300px outer container height */
  line-height: 30px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.item:hover .content {      
  /* centering text vertically 135px top + 15px (line-height/2) = 150px half the container height */
  top: 135px;
}
<div class="item"><span class="content">dummy text for test</span>
</div>

Upvotes: 1

Related Questions