Saturday, 20 February 2016

How To Make Images Fade Out On Hover Gradually


I always find that some of the little CSS hacks you can add to your blogs template can sometimes make the world of difference to the overall aesthetic. I wanted to create a little coding series every week with some new CSS tips and tricks I have learnt over the years to help other people in designing their blogs! Many people have installed the rollover effect on their blog images, but often it can look harsh suddenly changing from opaque to translucent. This tutorial is to make your blog images gradually fade into translucent, which is much more soft and visually appealing!


Head over to your blogs dashboard, and then in the menu click on Template, then Customise.


You will have a screen that looks a little something like this; your blog at the bottom and a grey menu bar at the top. Now click on Advanced, and scroll down until you reach Add CSS. Your screen will look almost identical to mine now. Copy the following code, and paste it into the white box.

img {
opacity: 1.0;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}
a:hover img {opacity: .6;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}
 Click Apply To Blog, and you are done! You can view your changes after by clicking on View Blog.

Have you got any requests for future CSS tutorials?

8 comments:

  1. Omg!!!!! I am literally going to apply this this morning! If it works i am going to be so happy! I have wanted to do this for so long but not worked out how to do it x thank you

    http://thriftyvintagefashion.blogspot.co.uk

    ReplyDelete
  2. Ooooo, I might try this! I'd love to see more CSS tutorials :)

    Bethan // Fiction and Tea

    ReplyDelete
    Replies
    1. Glad I could help! I have a few more lined up, so keep a look out! x

      Delete
  3. Such a simple thing to do but it can really add to your blog. Great tutorial will save it and give it a try.
    www.thisisallure.co.uk

    ReplyDelete
  4. I really like your tutorials Paige!

    I'm gonna try this :D

    ~ Rukiya

    ReplyDelete
    Replies
    1. Thanks Rukiya! Hope you like the changes! x

      Delete

Hello! Feel free to leave a comment, but please be nice! See my full commenting rules here