CODEWITHSUNDEEP
csscss-transitions
ali.b
ali.b

Reputation: 43

CSS transition not work

this is my code:

.pic {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
  border: 2px white solid;
  box-shadow: 0px 0px 0px 1px #E0DDDD;
  transition: 1s;
}
.pic img:hover {
  width: 100%;
  height: 100%;
  transition: 1s;
  transition-timing-function: ease-in-out;
  border: 2px red solid;
}
.pic img {
  transition: 1s;
}
<div class="pic">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

why is the transition not working in my code and what can be done to solve this problem?

Upvotes: 0

Views: 263

Answers (2)

toastrackengima
toastrackengima

Reputation: 8722

There's a few problems with your code:

  • You haven't defined what you want to transition. You've just said transition:1s;, which tells the browser... nothing. If you want to, say, change the opacity of the image, you would write transition:opacity 1s;.
  • Put the transition code on the element where the transition won't run. Then, just change the property that you want to transition and the browser will do the rest.

Here's a working demo: https://jsfiddle.net/q3nj9n54/

Also, please read this.

EDIT:

@ali-b Now that I know what you want to transition between (width and height), it should be easier to make this work.

  • To animate multiple properties, you need to comma seperate them in the transition property.
  • Also, at the moment, the width and height properties that you have defined are on the .pic element, not the image - it is essential that the values you want to animate are on the right property :P
  • On that note, you'll want .pic to be bigger than 150px by 150px, as otherwise there will be no change in the transition - the image will already be at 100% by 100%.
  • You still need to put the transition code onto the image before it's hovered - on hover, you just need to change the width and height.

Here's another fiddle of the transition between of width and height: https://jsfiddle.net/2j423dn5/

EDIT:

Now I get what you want :D

I was animating the wrong element.

This'll solve your problems: https://jsfiddle.net/2j423dn5/2/

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

Your transition code was a little off and needed some amendments.

I wasn't too sure what you're trying to add the actual transition to so i added code to do it on either the img or on its container so you have some options.

The transition CSS attribute is all of the transition attributes such as duration, attributes and style.

I also do not believe that Toastrackenigma's answer is wholly true as CSS Transitions don't require any browser prefixes (See here on CanIUse.com)

Ultimately, its just a little bit of incorrect syntax and a missing part on the transition telling it what elements it needs to run on.

.pic {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
  border: 2px white solid;
  box-shadow: 0px 0px 0px 1px #E0DDDD;
  transition: 1s all ease-in-out;
  box-sizing: border-box;
}
.pic img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: 1s all ease-in-out;
}
.pic.on_pic:hover {
  border: 2px red solid;
}
.pic.on_img img:hover {
  border: 2px red solid;
}
.pic.to_size:hover {
  width: 300px;
  height: 300px;
  border: 2px red solid;
}
<div class="pic on_pic">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

<div class="pic on_img">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

<div class="pic to_size">
  <img src="http://lorempixel.com/300/300/city/" alt="VBpro" title="VBpro">
</div>

In the comments below is the final fixed problem for the OP but here it is for other people without having to trawl through lots of comments.

Upvotes: 1

Related Questions