CODEWITHSUNDEEP
htmlcss
Ceejay
Ceejay

Reputation: 7267

Image moves on mouseover

I'm trying to achieve rollover of image on mouseover. i have a div having the background image.on mouseover on that div the background image will rollover. But the issue i'm facing is that when the image rollsover,the image is moving with that. for example when i mouseover the div, the image which is actually height of 217px will become 157px; while reducing the height of the div, the image is actually moving little upside, i don't want the image to move upside while the rollover effect. how can i avoid this.

i tried with background-position:fixed property, but this kinda giving the parallax effect

here's what i have done.

    .img-holder{
    	height:217px;
    	width:543px;
    	background:#dedede;
    	position:relative;
    
    }
    .bg-img{
    	position: absolute;
        height: 100%;
        width: 100%;
        content: "";
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        -webkit-transform: scale(1);
        transform: scale(1);
        position: absolute;
        -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
        transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
        background-size: cover;
        -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    }
    
    
    .bg-img:hover{
    	height:157px;
        -webkit-transform: scale(1.0) !important;
        transform: scale(1.0) !important;
    }
<div class="img-holder">
    	<div class="bg-img" style="background-image:url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');"></div>
    </div>

Actual effect i'm trying to achieve is that when mouseover the div should reduce its height, but the background-image of that div should not move with it.

Upvotes: 0

Views: 77

Answers (2)

asapon
asapon

Reputation: 69

Putting the background image and the hover effect for the "container" div instead will help you get the specific effect, but as other answers have mentioned, there are generally better ways to do it. :)

https://codepen.io/anon/pen/LqNKKN

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
  background-image: url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-img{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    display: inline-block;
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.img-holder:hover{
    height:157px;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Use background-position: 100% 100%; instead center center

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

}
.bg-img{
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    background-position: 100% 100%;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.bg-img:hover{
    height:157px;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}
<div class="img-holder">
    <div class="bg-img" style="background-image:url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');"></div>
</div>

Upvotes: 2

Related Questions