Kevin Powell - Community•4mo ago

How to make the hover background appear like in the video

thank you so much

7 Replies

conmeomaunauOP•4mo ago

Chris Bolson•4mo ago

Are you referring to how it gets bigger/zooms in?

conmeomaunauOP•4mo ago

yes , when i hover it

Chris Bolson•4mo ago

you should be able to change the background image size by altering it's background-size property on hover:

.card{
  width: 300px;
height: 400px;
  background-image: url("your_bg_image_url");
  background-size: 100%;
  background-position: center;
  transition: background-size 1000ms ease-in-out;
}
.card:hover{
  background-size: 200%;
}

.card{
  width: 300px;
height: 400px;
  background-image: url("your_bg_image_url");
  background-size: 100%;
  background-position: center;
  transition: background-size 1000ms ease-in-out;
}
.card:hover{
  background-size: 200%;
}

conmeomaunauOP•4mo ago

thank you so much If I use img tag, is it possible?

Chris Bolson•4mo ago

yes, you can just use scale: 200% or transfom: scale(200%) ( they are essentially the same). eg:

img{
  max-width: 100%;
  width: 300px;
  object-fit: cover;
  transition: scale 1000ms ease-in-out;
}
img:hover{
  scale: 200%;
}

img{
  max-width: 100%;
  width: 300px;
  object-fit: cover;
  transition: scale 1000ms ease-in-out;
}
img:hover{
  scale: 200%;
}

However, if you want to achieve the same effect as in your video, you will need to wrap the image in a container and give that an overflow: hidden (or clip) as otherwise the image will scale on top of all the surrounding content which may no be what you want.

<div class="img-wrapper">
<img src="your_image_url" alt="">
</div>

<div class="img-wrapper">
<img src="your_image_url" alt="">
</div>

.img-wrapper{
   width: 300px;
  overflow:clip;
}
.img-wrapper > img{
  width: 100%;
  object-fit: cover;
  transition: scale 1000ms ease-in-out;
  display: block;
}
.img-wrapper:hover > img{
  scale: 200%;
}

.img-wrapper{
   width: 300px;
  overflow:clip;
}
.img-wrapper > img{
  width: 100%;
  object-fit: cover;
  transition: scale 1000ms ease-in-out;
  display: block;
}
.img-wrapper:hover > img{
  scale: 200%;
}

conmeomaunauOP•4mo ago

thank you so much

Gaming

Programming

How to make the hover background appear like in the video