Shifted Blockquote

shifted blockquote is blockquote which has the effect of shifting the time at the cursor highlight. This in because I use different css code on hover border.


Live Demo


Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

Code CSS

blockquote {
background:url(http://gazo.emoji7.jp/img/051fi_724385/%E8%B2%B0%E3%81%86%E6%99%82%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%BF%98%E3%82%8C%E3%81%9A%E3%81%AB%21%21_m.gif);
background-repeat:no-repeat;
background-position:100% 95%;
width:450px;
display:block;
padding:10px;
border-left:20px solid #C3E5FB;
border-right:2px dashed #C3E5FB;
border-top:2px dashed #C3E5FB;
border-bottom:2px dashed #C3E5FB;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#555;
}
blockquote:hover{
background: none;
border-left:2px dashed #C3E5FB;
border-right:20px solid #C3E5FB;
color:#333;
}

Change url background as your wish. Enjoy!