Trying to add a scale effect on hover image - html

Question

I'm trying to add a scale effect to the images that are available on the first part of my website: http://www.esportbooks.com/esports-news/
In fact, I already made this effect on the "News" section that is just below, if you hover over the images the effect is already in place and I use CSS to create it.
The only thing is that I don't know how to get the exact name of the CSS style to replicate this effect on the first 3 images, I tried several things but none of them work.
Could someone help me to find out?

Answer 1

Probably what are you looking for is the css property transform: scale()
you could check the example bellow:
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
html, body{
margin: 0px;
padding: 0px;
font-size: 18px;
font-weight: 300;
height: 100%;
color: #fff;
}
.container{
width: 1024px;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
}
figure{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: 1em;
}
figure img{
transition: all .3s ease-in-out;
transform: scale(1);
}
figure:hover img{
transform: scale(1.2);
}
<div class="container">
<figure>
<img src="http://placeimg.com/400/300/any" alt="Thumb" width="400" height="300" />
</figure>
<figure>
<img src="http://placeimg.com/400/300/nature" alt="Thumb" width="400" height="300" />
</figure>
</div>

Answer 2

Add this CSS code in your css file:
.fusion-image-wrapper {
transform: scale(1);
-webkit-transform: scale(1);
transition: all .5s;
-webkit-transition: all .5s;
}
.fusion-post-wrapper:hover .fusion-image-wrapper {
transform: scale(1.7);
-webkit-transform: scale(1.7);
}