48 thoughts on “Slide an Image on Hover Using a CSS Transition”

  1. any idea why my image is distorting instead of being cut off? it works by itself but when i place it in my projects section of my website, the image is squishing instead of cutting off at 150px

  2. Helped a lot thank you! Is there a way to make it responsive? I'm pretty new to web-design but i think using px makes it static either way right?

  3. Hi Kirupa, could you please help me with my code? Transition part for pics is not working. If replace pics with background-color works just fine.

    .news-img {
    width: 100%;
    height: 120px;
    background-image: url('./img/cat.jpg');
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    }

    .index-news article:hover .news-img {
    background-image: url('./img/cat-hover.jpg');
    }

  4. Hi. I am trying to move buttons like gaming pad in css like up down left right buttons with robot image in center. When I move left button right button moves too but I only give margin to left button. I do not understand why right one moves too and the image moves too. I have given different id's to all buttons and image. does not work. I have tried given them different classes too. nothing works. Please help

  5. Beautiful animation of circle with html tags and inline css(use responsive web browser like chrome, Firefox and other) http://www.top4ways.com/2017/06/beautiful-animation-of-circle-with-html.html

  6. Thank you very much! but how to resize the picture? when i tried to change number of pixels some part of the image disappears. how to fix that?

  7. you are very knowledgeable guy that is obvious, but you are very stingy with the info you put in your videos, you do not put a lot of that knowledge you have in your tutorial, Why?

  8. hola, te felicito! tu vídeo es muy bueno, explicas muy bien, pero no tienes alguna pagina donde pueda aprender yo? en español? gracias!

  9. Hello sir i really need your help the bottom part of my image is not showing when i hover this is my code thaaank you so much!

    .sect {

    top: 580px;
    position: relative;
    height: 496px;
    width: auto;
    z-index: 36;
    }
    .sect1 {
    text-align: center;
    background-color: #f3f3f3;
    }
    .sect2 {
    background-color: #df2823;
    }
    /————–content————–/
    .imgcont{
    height: 276px;
    width: 276px;
    overflow: hidden;
    margin-top: 158px;
    margin-right: 3px;
    margin-left: 3px;
    border-radius: 7px;
    display: inline-block;
    }
    #first{
    transition: transform .3s ease-in-out;
    background: url(c1.jpg);
    }
    #second{
    transition: transform .3s ease-in-out;
    background: url(c2.jpg);
    }
    #third{
    transition: transform .3s ease-in-out;
    background: url(c3.jpg);
    }
    #fourth{
    transition: transform .3s ease-in-out;
    background: url(c4.jpg);
    }
    #first:hover{
    transform: translate3d(0px, -276px, 0px);
    }
    #second:hover{
    transform: translate3d(0px, -276px, 0px);
    }
    #third:hover{
    transform: translate3d(0px, -276px, 0px);
    }
    #fourth:hover{
    transform: translate3d(0px, -276px, 0px);
    }

  10. cool man..what package you use for preview in browser?.
    Just today beginning With atom and don't find the preview..like braquets.
    nace tuts..i follow your channel for one year and you give quality.
    cheers from Spain

  11. You are not using visual studio anymore?
    I want to ask u which one is better Dreamweaver or MS Visula studio. or anything else?

  12. using only divs with backgrounds is much better because you can add new effects like outline and so on,but for starters this is a good example.

  13. Hai Sir you are very smart
    because your presentation is wonderful and i feel you are in class so this is my first experience in internet tutorials.
    thanking u.

  14. Hi sir, what's the name of the package you are using to get live preview? Plz reply. Thanks in advance.

  15. I tried to use and add these CSS codes into Komodo Edit that I am using but I guess It doesn't supports. In which program are you using this coding. Is it CSS3 or the CSS. Thanks, Abdul

  16. I want to design main page for my project can u help me out how to design the like DUNLOP main page. I want to know how to make the image slide using mouseover event . I have added the link of that page
    en.dunlop-tire.ru

  17. What program are you using?

    Also I am trying to find a way to make a menu where one image is hovered over another image is moved next to it like a pointer.

    I Have tried

    .sign1 img:hover .pointer {
    transform: scale(.5) translate(-50px);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *