How to add a zoom effect on collage images in Dawn theme?

Store Design
1

Hi I want to add a zoom effect when hovering on my collage images in the Dawn theme. I already made the images a clickable link with text overlay, but I want the pic to stay in it’s box, but zoom in just slightly upon hover if someone has some code that works thanks!

2

Nevermind I got it to work myself with

.collage-card {

overflow: hidden;

}

.collage-card img {

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.collage-card:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

3

Hi @shellbell .

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

You can use this code of mine

.collage-card{
width: 300px;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.collage-card img{
 transition: transform .2s;
}
.collage-card:hover img{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Hope this helps.

Best regards,

PageFly

4

Actually mine worked for a bit then stopped working. And the code you supplied doesn’t work for me either, so if anyone has a solution for this let me know!