In this post I am going to share simple CSS only code written by paul del signore to Create Animated Text Overlay On Image On Mouse Hover so that you can showcase your images with some text info, when ever visitor mouse over on any image an animated text overlay will display with some info about that image. It is helpful to display full product image with text overlay product info.
Creating Animated Text Overlay On Mouse Hover Effect
HTML
Create box container and insert image then put text caption inside overbox class which will act like text overlay on hover.
CSS
Now add CSS3 transitions to apply text overlay effect on mouse hover.
.box { cursor: pointer; height: 250px; position: relative; overflow: hidden; width: 400px; font-family: 'Open Sans', sans-serif; } .box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .box .overbox { background-color: #304562; position: absolute; top:0; left:0; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; width: 360px; height: 200px; padding: 130px 20px; } .box:hover .overbox { opacity: 1; } .box .overtext { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; transform: translateY(40px); -webkit-transform: translateY(40px); } .box .title { font-size: 2.5em; text-transform: uppercase; opacity: 0; transition-delay: 0.1s; transition-duration: 0.2s; } .box:hover .title, .box:focus .title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .box .tagline { font-size: 0.8em; opacity: 0; transition-delay: 0.2s; transition-duration: 0.2s; } .box:hover .tagline, .box:focus .tagline { opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); } |
See live demo and download source code.
