CODEWITHSUNDEEP
htmlcss
Ricardo DeLa Rosa Nieto
Ricardo DeLa Rosa Nieto

Reputation: 59

Trying to add a scale effect on hover image

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?

Upvotes: 0

Views: 223

Answers (2)

Joykal Infotech
Joykal Infotech

Reputation: 1876

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);
   }

Upvotes: 1

João Deroldo
João Deroldo

Reputation: 465

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>

Upvotes: 3

Related Questions