CSS (or not) animated image it becomes transparent onmouseover and then becomes untransparent again -

heyo féoho gotta question, I have to create a picture which becomes slightly transparent (like opacity 0,4), then size Grows like 2x and then becomes unrestricted (Opacity 1) and the text does not convert that position to its position.

  img {opacity: 1; Width: 250; } Img: Hover {Opacity: 0.4; Filters: alpha (opacity = 40); Width: 500px; Transit-property: width; Transition period: 4s; }  

I created only one CSS code for size and transparency, although it is not known how to make it again opacity after my 4sec animation and it does not know How to create a text Very much after the image size increases

Hello, I could not understand your problem properly. But here I think that you want something like that.

HTML

  & lt; Img src = "http://t3.gstatic.com/images? Q = TBN: AN9 GCTCRT 41JVA 43 Blaz DOS5TigUCCsCXBS 1U6DBiHIPMGJ-OAR7S8X" AT & GT;  

CSS

  @keyframes lI {0% {Opacity: 1; Conversion: Scale (1);} 50% {Opacity: 0.4; Conversion: Scale (1.3);} 100% {Opacity: 1; Conversion: Scale (1.3);}} @ -WebKit-keyframe {0% {Opacity: 1; Webkit-Conversion: Scale (1);} 50% {Opacity: 0.4; Webkit-Conversion: Scale (1.3);} 100% {Opacity: 1; Webkit-Conversion: scale (1.3);}} img {display: block; Opacity: 1; Consequently: scale (1); Webkit-Conversion: Scale (1); } Img: Hover {animation: AI4S Linear 1 forward; Webkit-Animation: Le 4S Linear 1 Forward; }  

Please check this out. It uses CSS3 Animation