CODEWITHSUNDEEP
javascriptjquerycss
Sachin Singh
Sachin Singh

Reputation: 81

how can i add css transition of image to slide up and down on hover of div

i have two blocks in my bootstrap row. one is having image and another one having text. i wrapped both of them in row. whenever i scroll the image need to slide downward little and whenever i cross div i mean mouse out of div the image again need to move upward little. i tried by adding and removing class on hovering div. but i didn't got it getting confusion which transition and when i need to apply. please help me

<div class="container-fluid"><!-- /.container -->
<div class="row shopping"><!-- main here -->
          <div class="col-md-12">
            <div class="row shop4">
              <div class="col-md-6">
              <img src="images/leftzoom.jpg" width="50%"> 
              </div>
              <div class="col-md-6">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
              </div>
            </div>
</div>
        </div><!-- main here -->
        </div><!-- /.container -->

Upvotes: 0

Views: 63

Answers (1)

VilleKoo
VilleKoo

Reputation: 2854

Just add transform on your <img> or on parent <div> containing it. 

img { transition: transform .3s }

img:hover {
  transform: translateY(1rem);
}
<div>
  <img src="https://fillmurray.com/300/200" />
</div>

Upvotes: 1

Related Questions