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

New Here ,
Sep 06, 2017 Sep 06, 2017

Copy link to clipboard

Copied

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.

Views

755

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Sep 06, 2017 Sep 06, 2017
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

Likes

Translate

Translate
Adobe Community Professional ,
Sep 06, 2017 Sep 06, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 07, 2017 Sep 07, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 07, 2017 Sep 07, 2017

Copy link to clipboard

Copied

That makes me happy, great.

Enjoy your life!

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 14, 2017 Sep 14, 2017

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 28, 2017 Sep 28, 2017

Copy link to clipboard

Copied

LATEST

Thanks sooraj1992 !!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines