Saturday, 30 June 2018

11 excelentes efeitos de imagem CSS para blogs

11 excelentes efeitos de imagem CSS para blogs


DOWNLOADS E DICAS

"Looking for CSS image hover effects? .Here are the 11 Excellent CSS image hover effects for your blogs and sites."
CSS image hover effectsNow a days we should have to add images in our site content as images can bring life in the content also help to attract visitors. To make our site more interactive and attractive we should have to addCSS image hover effects on images which can bring interativity to our site and also improve image quality and make content more interesting and attractive.
There are many CSS image hover effects are now developed by designers. Therefore, here in this post we have added 12 excellent CSS image hover effects for sites and blogs.

These can be used on blogger blog and on wordpress blogs but we have set the code according to bloggers template settings so we can easily add these CSS image hover effects in blogger by just pasting one of the below code in our template.

How to add CSS image hover effect in blogger

For the newbies who dont know how to add CSS image hover effect in blogge here is small guide for them so they can also become able to add css image hover effects to their blogger blogs. To add CSS image hover effect in blogger follow below steps:
  • Goto blogger dashboard
  • goto Template >> edit html
  • Search for ]]></b:skin> tag ( quick tip: to search easily press ctrl+f )
  • Just above ]]></b:skin> paste one of the below CSS image hover effect code.
  • and you done!

11 Excellent CSS image hover effects


Grow CSS image hover effect

Grow CSS image hover effect
As seen in the above image with this CSS image hover effect the image will grow in size with the hover of mouse pointer. Below is the CSS chunk for this CSS image hover effect.
 .post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
}

Shrink CSS image hover effect

Shrink CSS image hover effect

 /*SHRINK*/
.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}

Sidepan CSS image hover effect

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)