Scroll an image only when there is an hover on it.

[stevenrinc]

Hi everyone,

I would like to create prototypes like in the link bellow to show mobile interfaces on a site created with Adobe Muse.

Link

I didn't find a widget for that, so I thought to place a .png device picture in foreground with a vaccum in the screen and then the image of my interface in second plan. But how can I scroll an image only when there is an hover on it and then blocking the scrolling of the main page during this time? Thereby, I want to block the scrolling of the image when there is no hover on it and then only the main page can scroll.

[fotoroeder · Accepted solution]

I don´t see any solution for this.

I suggest to search for another design approach to show what you want with scroll motion effects and different "speed" between background and screen mockup.

Best Regards,

Uwe

[stevenrinc]

Hi Uwe,

Thank you for your answer. It seems that you are right. I am going to use an other approach.

Have a good day!

[fotoroeder]

That makes me happy, great.

Enjoy your life!

Uwe

[sooraj1992]

Now this is the solution....

in html;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

<div class="container">

            <div class="row">

                <h2 class="text-center">Image Scroll on Hover</h2>

                <div class="col-md-4 col-md-offset-4 content">

                    <div class="screen">

                        <img src="http://lemontreetheme.com/images/gold-fish.png">

                    </div>

                </div><!--content-->

            </div><!--row-->

        </div><!--container-->

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

css for hover;;;;;;;;;;;;;;;;;;;;;;;;;;

..................................................

.container {

  padding: 80px 0;

}

.content {

  position: relative;

}

.screen {

    display: block;

    width: 300px;

    height: 350px;

    overflow: hidden;

    position: relative;

    border: 2px solid #b3b3b3;

    border-radius: 1px;

    margin: 0 auto;

}

.screen img {

    bottom: -1878px;

    width: 100%;

    height: auto;

    position: absolute;

    z-index: 0;

  margin:0;

  padding:0;

    -webkit-transition: top 11s;

    -moz-transition: top 11s;

    -ms-transition: top 11s;

    -o-transition: top 11s;

    transition: bottom 11s;

}

.screen:hover img {

  bottom: 0;

  -webkit-transition: all 11s;

  -moz-transition: all 11s;

  -ms-transition: all 11s;

  -o-transition: all 11s;

  transition: all 11s;

}

[stevenrinc]

Thanks sooraj1992 !!