CODEWITHSUNDEEP
htmlcsscss-transitions
Greg
Greg

Reputation: 3063

Move image up on mouse over

I'm trying to move my image up by 10px on mouse-over but for some reason that doesn't work. Here is what I have tried:

http://jsfiddle.net/w3qqv4vh/

CSS:

.image {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 238px;
  height: auto;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  overflow: hidden;

.image:hover {
  margin-bottom: 10px;    
  transition: margin-left .5s;
  -moz-transition: margin-left .5s; /* Firefox 4 */
  -webkit-transition: margin-left .5s; /* Safari and Chrome */
  -o-transition: margin-left .5s; /* Opera */
}

Upvotes: 0

Views: 1910

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

transition is applied on .image not .image:hover and just use transform

body {
  background-color: rgb(255, 255, 255);
  font-family: 'Source Sans Pro';
  font-size: 13px;
  font-weight: 200;
  line-height: 1.38;
  color: #000000;
}


.image {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 238px;
  height: auto;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  overflow: hidden;
  -webkit-transform:translateY(0);
  transition: transform .5s ease;
} 
.image:hover {
  -webkit-transform:translateY(-10px);  
}
  <img class="image" alt="" src="http://lorempixel.com/output/food-q-c-284-239-1.jpg">

You can use padding too

body {
  background-color: rgb(255, 255, 255);
  font-family: 'Source Sans Pro';
  font-size: 13px;
  font-weight: 200;
  line-height: 1.38;
  color: #000000;
}


.image {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 238px;
  height: auto;
  margin: auto;
  overflow: hidden;
  transition: padding-bottom .5s ease;
}
  
.image:hover {
  padding-bottom: 10px;    
  
}
  <img class="image" alt="" src="http://lorempixel.com/output/food-q-c-284-239-1.jpg">

Jsfiddle

Upvotes: 0

Divakar Gujjala
Divakar Gujjala

Reputation: 803

There are some changes that you need to do on the css.

CSS

.image {
  display: block;
  position: absolute;
    top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 238px;
  height: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  overflow: hidden;
  }

.image:hover {
  margin-top: -10px;    
  transition: margin-left .5s;
  -moz-transition: margin-left .5s; /* Firefox 4 */
  -webkit-transition: margin-left .5s; /* Safari and Chrome */
  -o-transition: margin-left .5s; /* Opera */
}

http://jsfiddle.net/w3qqv4vh/1/

Upvotes: 1

Related Questions