Vamos hacer un bonito hover es decir coloca el puntero encima de la imagen y veras la diferencia
Hover me!
Si te gusta esto insertárselo a tu web es muy sencillo copia el codigo de abajo y darle los cambios que desees
<style> .parrot { width: 161px; height: 117px; margin: 2em auto 0 auto; position: relative; } .parrot .body { width: 56px; height: 117px; background: #ee004c; border-top-left-radius: 30px; border-bottom-right-radius: 30px; position: absolute; left: 48px; z-index: 10; } .parrot .wing { width: 77px; height: 58px; background: rgba(19, 190, 0, 0.98); border-top-right-radius: 30px; border-bottom-left-radius: 30px; position: absolute; left: 0; top: 40px; z-index: 30; } .parrot .wing:after { content: ""; width: 22px; height: 19px; background: #9c0179; border-bottom-left-radius: 12px; position: absolute; left: 27px; bottom: -19px; z-index: -1; } .parrot .wing:before { content: ""; width: 22px; height: 3px; background: rgba(6, 6, 6, 0.12); position: absolute; bottom: -3px; left: 27px; } .parrot .eye { width: 40px; height: 40px; background: #321557; border: 8px solid #fff; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: 70px; top: -10px; z-index: 70; } .parrot .eye:after { content: ""; width: 13px; height: 13px; background: #fff; border-radius: 50%; left: 3px; top: 2px; position: absolute; transition: all 0.4s ease; } .parrot .mouth { width: 56px; height: 56px; position: absolute; right: 1px; } .parrot .mouth:after { content: ""; width: 75px; height: 36px; background: #fcce00; border-top-right-radius: 30px; transform-origin: left top; position: absolute; right: 0; transition: all 0.4s ease; } .parrot .mouth:before { content: ""; width: 29px; height: 19px; background: #0073ca; border-bottom-right-radius: 30px; box-sizing: border-box; border-top: 3px solid #004b97; position: absolute; left: 0px; top: 36px; } .parrot:hover { cursor: pointer; } .parrot:hover .mouth:after { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); } .parrot:hover .eye:after { width: 10px; height: 10px; left: 6px; } .parrot:hover .greeting { right: -184px; opacity: 1; } .parrot .greeting { position: absolute; background: #fff; padding: 2em 1em; right: -150px; opacity: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-family: sans-serif; text-transform: uppercase; transition: all 0.5s ease; } .parrot .greeting:before { content: ""; width: 0; height: 0; position: absolute; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #fff; left: -12px; top: 25px; } .parrot .hover { position: absolute; font-family: Sans-Serif; left: 40px; bottom: -40px; opacity: 0.4; } </style> <div class="parrot"> <div class="body"></div> <div class="wing"></div> <div class="eye"></div> <div class="mouth"></div> <div class="greeting"></div> <p class="hover">Hover me!</p> </div> <script type="text/javascript"> var today = new Date(); var currentTime = today.getHours(); var helloText; if(currentTime >= 0 && currentTime < 12) { helloText = "Good Morning"; } else { helloText = "Good Evening"; } $('.greeting').text(helloText);</script>
