전환 CSS로 이미지 크기를 조정하는 방법은 무엇입니까?

마우스를 올려 놓으면 이미지의 크기를 조정하고 싶습니다.전환 CSS로 이미지 크기를 조정하는 방법은 무엇입니까?

예를 들어 this을 수정하려고합니다. 참조 img 및 img.hover

는 CSS :

h1 { 
    text-align:center; 
    animation: acid 1s infinite; 
    -webkit-animation: acid 1s infinite; 
} 

div { 
    text-align:center; 
} 

hr { 
    width:30%; 
} 

img { 
    width:629px; 
    height:321px; 
    -webkit-transition: width 1s ease, height 1s ease; 
} 

img.hover { 
    width:944px; 
    height:481px; 
} 

@keyframes acid { 
    0% {color:blue} 
    50% {color:red} 
    100% {color:blue} 
} 

@-webkit-keyframes acid { 
    0% {color:blue} 
    50% {color:red} 
    100% {color:blue} 
}

이미지, 즉이 정의되어 확장 할 예정이다 <img src="http://www.jose-aguilar.com/blog/wp-content/uploads/2012/09/html-colors.png" alt="Colors">

HTML : 퍼센트 값으로

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>0_0</title> 
     <link rel="stylesheet" type="text/css" href="my_styles.css"> 
    </head> 
    <body> 
     <h1>I am page header</h1> 
     <div>Below there are <a href="http://en.wikipedia.org/wiki/Color">colors </a>:</div> 
     <div> 
      <img src="http://www.jose-aguilar.com/blog/wp-content/uploads/2012/09/html-colors.png" alt="Colors"> 
     <div> 
     <!--You are looking at the source of this page--> 
     <hr> 
     <button type="button">I am button</button> 
     <div>I don't do anything</div> 
     <hr> 
     <br> 
     <div> 
      <input type="checkbox" style>option 1<br> 
      <input type="checkbox">option 2 
     </div> 
    </body> 
</html>

변경 픽셀 값에 img 및 img.hover은 도움이되지 않습니다. 파이어 폭스와 크롬

출처

2014-09-09 user2136963

에서 시험이 Pseudo-classes on MDN를 참조 자세한 내용은 의사 클래스

img:hover

를 사용하기로되어있다. w3schools보다 훨씬 좋습니다.

출처

2014-09-09 08:40:51 Katti

마크 업에 간단한 오류가 있습니다 ... img.hover은 img:hover이어야합니다.

pseudo-class specification from W3C을 참조하십시오.

출처

2014-09-09 08:41:44 rnevius

아니고

img.hover 
{ 
    width:944px; 
    height:481px; 
}

의 :hover

img:hover 
{ 
    width:944px; 
    height:481px; 
}

FIXED DEMO

출처

2014-09-09 08:48:52

전환 CSS로 이미지 크기를 조정하는 방법은 무엇입니까?

답변

관련 문제