Hello guys, firstly thanks a lot for showing all the interest and acknowledgements for my very first post which was on “How to add a grayscale effect on any image“. To be frank I really didn’t expect these many comments. So, I am over-whelmed and happy to get all of them.

So, again I am back with another interesting tutorial regarding 5 different Image Hover CSS3 effect you can possibly have to make them look more fantastic and responsive.

Lets begin with this first one.

Before we begin some basic setup is required, which is regarding setting up the frame in which you would like to put the image you want to insert effect upon.

/****** image hover ******/

.img-hover *  {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.img-hover  {
    position: relative;
    width: 750px;
    height: 320px;
    display: inline-block;
    overflow: hidden;
    background: #fff;
    border: 10px solid #fff;

}

.img-hover img  {
    margin: -100px 0px 0px -100px;
}

/****** For merry go round effect ******/

.image-merry *  {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.image-merry  {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 10px solid #fff;
    height:  400px;   
    width:  400px;     
}
.image-merry img  {
    margin: -100px -100px;
}

(1) Β Image Hover Zoom In Effect

Step 1 : Well this is something which you usually might have observed but have been wondering though on how to apply the same then this is the first step to select the following image from your collection.

<div class="img-hover image-zoom-in">
                    <img src="your image.jpg">
                </div>

Step 2 : Add this CSS code into the style tag of your html file or in your style.css file.

.image-zoom-in img 
{
transition:all 2s ease-in-out;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
}

.image-zoom-in:hover img 
{
	cursor: pointer;
transform:scale(1.3);
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-ms-transform:scale(1.3);
-o-transform:scale(1.3)
}

(2) Image Β Hover Zoom Out Effect

This second effect is the inverse of the first one, as you can see the above one was Zoom In, this one is Zoom Out.

Step 1 : Create this class.

<div class="img-hover image-zoom-out">
                    <img src="your image.jpg">
                </div>

Step 2 : Add the below mentioned CSS code in the same manner as you did above.

.image-zoom-out img 
{
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}

.image-zoom-out:hover img 
{
cursor: pointer;
transform:scale(0.9);
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9)
}

(3) Image Hover Rotate Right Effect

Step 1 : What if some image will come from the extreme right side surprising you with some awesome effects? Feeling excited? Ohh then what are you waiting for? Just jump over the code buddy. πŸ˜›

<div class="img-hover image-rotate-right">
                    <img src="your image.jpg">
                </div>

Step 2 :Β Add the below mentioned CSS code in the same manner as you did above.

.image-rotate-right img 
{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

.image-rotate-right:hover img 
{
	cursor: pointer;
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg)
}

(4) Image Hover Rotate left Effect

Step 1 : The exact contradiction to the above effect is this one. πŸ™‚

<div class="img-hover image-rotate-left">
                    <img src="your image.jpg">
                </div>

Step 2 :Β Add the below mentioned CSS code in the same manner as you did above.

.image-rotate-left img 
{

transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
}

.image-rotate-left:hover img 
{
	cursor: pointer;
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-o-transform:rotate(-20deg)
}

(5) Image Hover Merry Go RoundΒ Effect

Step 1 : Well up-til now you might have experienced that rides in some theme parks i.e. our childhood favorite but have you ever experienced the same in the HTML world? If no, then you’ll be able to easily do so with this.

<div class="image-merry merry">
  <img src="images/cupper.jpg" alt="">
</div>

Step 2 :Β Add the below mentioned CSS code in the same manner as you did above.

.merry {
  -webkit-transition: all 0.9s ease;
     -moz-transition: all 0.9s ease;
       -o-transition: all 0.9s ease;
      -ms-transition: all 0.9s ease;
          transition: all 0.9s ease;
}

.merry:hover {
	cursor: pointer;
  border-radius: 50%;
  -webkit-transform: rotate(720deg);
     -moz-transform: rotate(720deg);
       -o-transform: rotate(720deg);
      -ms-transform: rotate(720deg);
          transform: rotate(720deg);
}

Conclusion:-

Well, this is all about my new efforts towards learning CSS and most importantly sharing with you people.

I hope this is going to be helpful to you insome or the other way.

If you have got any queries or new techniques regarding this then I’ll be happy to learn the same.
Keep sharing, keep coding, keep exploring.
  • Amal

    Hi Mosam,
    I’m about to launch my first ever product on New Year’s Day and I’m having trouble working on the website. It’s hard to do the right combinations to stand out.
    But I think the Css3 Hover effect might give something special to the page. Thanks a lot for sharing πŸ™‚

    Cheers!

    • Mosam Gor

      Hello Amal,

      Thanks for the Comment I’m so glad you like it. πŸ™‚

      Keep Visiting and Sharing πŸ˜‰

      -Mosam

  • Smitlife

    Nice step by step Tutorial.. I want to learn CSS3 and HTML5 … this will surely help me !

    • Mosam Gor

      Hello Smit,

      thank you for visiting.!

      Glad to know that will help to you πŸ™‚

      Stay coming and keep visiting πŸ˜‰ πŸ˜€

      -Mosam

  • Nauman

    Hi Mosam,

    Great tutorial.!

    it will surely be helpful for me πŸ™‚ Thanks for sharing the image-hover effect. i just loved Merry-Go Round image hover effect πŸ˜‰ you rock Buddy.! πŸ˜‰

    Nauman

    • Mosam Gor

      Hello Nauman Bro, πŸ˜‰

      Thanks for your wonder compliments on my article. yes, merry go round effect is also my favourite πŸ˜‰

      Keep Coming and Keep Sharing πŸ˜‰

      -Mosam

  • Kavan Pancholi

    Hey Mosam,
    Nice tutorial. Effects are pretty cool! It can be used in buttons as well as images.
    If you ask me last effect seem too much to me, rounds are so many and little time consuming too. “Lesser time transition is more good when you see as per user perspective.”
    I would like to suggest some other effects. Check this out: https://github.com/daneden/animate.css For Demo: https://daneden.me/animate/
    Keep going and write fantastic posts like the same. πŸ˜‰

    • Mosam Gor

      Hello Kavan,

      Thanks for the Compliment πŸ™‚ Glad to know you are here πŸ˜‰
      A warm welcome to my blog. πŸ˜‰ yes, you are right and thank you very much for your suggestion i’ll keep in my mind πŸ™‚ by the way

      Stay coming and keep Sharing πŸ˜‰ πŸ˜€

      -Mosam

  • Sanjeev

    Hi Mosam, sone cool tricks. I like the one with automatic zoom…it can be really good to catch the eye..

    • Mosam Gor

      hello sanjeev,

      Thank you for your Comment πŸ™‚ I’m so glad you like the effect πŸ™‚

      Keep visiting and Keep Sharing πŸ˜‰

      -Mosam

  • niraj bhusal

    Hello Mosam,
    You are a good blogger as well as a good coder too. I don’t have much more knowledge on CSS but the code you have shared is really good. Great tutorial. Thanks for sharing

    • Mosam Gor

      Hello Niraj,

      thanks for your kinda words πŸ˜‰

      Keep Coming and Keep Visiting πŸ˜‰

      -Mosam

  • Rachit

    Hii Mosam ,
    Amazing Step by step tutorials …it will be very helpful for me ….
    I like Image Hover zoom in-out and Merry Go Round Effect most…….
    Thanx for sharing this tuts… Keep it up and write amazing posts like this….. πŸ˜€

    • Mosam Gor

      Hello Rachit Bro,

      Thanks for your Compliments πŸ˜‰ glad you like the effects πŸ™‚

      Keep Visiting and Keep Sharing πŸ˜‰

      -Mosam

  • Sohil Memon

    You are really an awesome Geek man! Nice tutorial. Thanks for sharing with us πŸ˜€

  • Dakota

    You share interesting things here. I think that your blog can go viral easily, but you must give it
    initial boost and i know how to do it, just search
    in google – mundillo traffic increase