How to Add Hover Effect in Your Blockquote- The Heart Shape!

add hover effect in blockquote
This post is the answer of my  promised when I make an article on "How to Make Blockquotes Styles". If you found it interisting. This time, I will tell you that it will be more than interisting since  a hover effect is added to the  CSS codes. Have an overview  by clicking the live demo  below.


Live Demo

How to Add Hover Effect in Your Blockquote- The Heart Shape!


Step 1. Go to your Blogger Dashboard
Step 2. Hit the Template button (have a back-up of your template)
Step 3. Click the Edit HTML button
Step 4. Find or Control the code below
]]></b:skin>
Step 5. Just above it paste the code below
blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42V0GrVD0JOa3qi7pgZpblbTMKCetysSSaqHxN832BzEab1gS6BQL6WIdogXNkJrzXOsv49LPqXLIOQkmetl4Hf2EbTqvjRsidYbC8cOYL-HdDr8yFhnD9K-pistUZNpnlzPYcel_geI/s1600/love+fireworks.jpg2.png) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#ff00ff;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
border:1px ridge #ff0000;
}
blockquote:hover {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOQcI2sjHlNeevM5tRIkbmHSTDy7ER5MbS8gIgdLHjCY6QvrhZUbvTEXJlRtBv8ZBg_5ouLDktjq4xikn3PUEr8tzNdSCvYRkiO4FluiHLqWbVPtamQMxxmTZfCYK__seYvYNumFNooY/s1600/love+fireworks.png) no-repeat right bottom ;
color:#01DFD7;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
-webkit-box-shadow: 0px -2px 35px #0101DF;
box-shadow: 0px -2px 35px #0101DF;
border: 1px ridge #0000ff;
}

blockquote p {
margin: 0;
padding-top:10px;

There are two set of CSS codes responsible for this tutorial:
  • Blockquote - This is default setting of your blockquote. Click here for its customization.
  • Blockquote:hover - This is the result of your blockquote when a you hover the mouse over it.
  • The explanation with regards to its border, background,  etc. is almost the same.
Step 6.  After customizing the above codes you may now save your template and you're done!

Also check these post:

Hope you like this tutorial buddies. If you have some questions, feel free to leave at the comment section below...
Peace and More Blessings to Your Family!!!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...