├── img ├── m.jpg ├── fork.png ├── .DS_Store ├── chaps_1x.jpg ├── raspberry.jpg ├── sketch_1x.jpg ├── ithinkican_01.jpg └── everycowboy_dribbbleready_shot.jpg ├── index.html ├── index2.html ├── index4.html └── index3.html /img/m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/m.jpg -------------------------------------------------------------------------------- /img/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/fork.png -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/.DS_Store -------------------------------------------------------------------------------- /img/chaps_1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/chaps_1x.jpg -------------------------------------------------------------------------------- /img/raspberry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/raspberry.jpg -------------------------------------------------------------------------------- /img/sketch_1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/sketch_1x.jpg -------------------------------------------------------------------------------- /img/ithinkican_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/ithinkican_01.jpg -------------------------------------------------------------------------------- /img/everycowboy_dribbbleready_shot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hasinhayder/ImageCaptionHoverAnimation/HEAD/img/everycowboy_dribbbleready_shot.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Caption Hover Animations 9 | 10 | 11 | 12 | 161 | 162 | 163 |
164 | 165 |
166 | 167 |
168 |

IMAGE CAPTION HOVER ANIMATION

169 |

WITH CSS3 TRANSITIONS & TRANSFORMS

170 |

171 | This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. 172 |

173 | 174 |

175 | Illustration Credit: Illustrations used in this example are coming from Mike | Creative Mints & Colin Hesterly . 176 |

177 |
178 | 179 |
180 | 186 |
187 | 188 |
189 | 251 |
252 | 253 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Caption Hover Animations 9 | 10 | 11 | 12 | 167 | 168 | 169 |
170 | 171 |
172 | 173 |
174 |

IMAGE CAPTION HOVER ANIMATION

175 |

WITH CSS3 TRANSITIONS & TRANSFORMS

176 |

177 | This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. 178 |

179 | 180 |

181 | Illustration Credit: Illustrations used in this example are coming from Mike | Creative Mints & Colin Hesterly . 182 |

183 |
184 |
185 | 191 |
192 | 193 |
194 | 256 |
257 | 258 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Caption Hover Animations 9 | 10 | 11 | 12 | 177 | 178 | 179 |
180 | 181 |
182 | 183 |
184 |

IMAGE CAPTION HOVER ANIMATION

185 |

WITH CSS3 TRANSITIONS & TRANSFORMS

186 |

187 | This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. 188 |

189 | 190 |

191 | Illustration Credit: Illustrations used in this example are coming from Mike | Creative Mints & Colin Hesterly . 192 |

193 |
194 |
195 | 201 |
202 | 203 |
204 | 266 |
267 | 268 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Caption Hover Animations 9 | 10 | 11 | 12 | 185 | 186 | 187 |
188 | 189 |
190 | 191 |
192 |

IMAGE CAPTION HOVER ANIMATION

193 |

WITH CSS3 TRANSITIONS & TRANSFORMS

194 |

195 | This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. 196 |

197 | 198 |

199 | Illustration Credit: Illustrations used in this example are coming from Mike | Creative Mints & Colin Hesterly . 200 |

201 |
202 |
203 | 209 |
210 | 211 |
212 | 274 |
275 | 276 | --------------------------------------------------------------------------------