CODEWITHSUNDEEP
htmlcssimagehoverzooming
Riccardo
Riccardo

Reputation: 2216

CSS image zoom and center on hover

Possible to zoom and center an image on hover with only CSS?

For instance:

enter image description here

Code below will only zoom:

JSFiddle: https://jsfiddle.net/6r0bx6ba/1/

.floatl {
  float: left;
}

.main {
  width: 100%;
}

.submain {
  width: 30%;
  float: left;
}

.zoomin img {
  width: 200px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.zoomin img:hover {
  width: 300px;
}
<div class="main">
  <div class="zoomin submain">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
  <div class="zoomin submain">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
  <div class="zoomin submain">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
</div>

Upvotes: 0

Views: 5761

Answers (1)

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

Reputation: 16251

What about to add when hover on image:
for example to the first one (I add class to cout the img)

margin-left:70px;
margin-top:70px;


.floatl {
  float: left;
}

.main {
  width: 100%;
}

.submain {
  width: 30%;
  float: left;
}

.zoomin img {
  width: 200px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}


.a  img:hover{
   margin-left:100px;
    margin-top:70px;}
.b  img:hover{
  
    margin-top:70px;}

.c  img:hover{
   margin-left:-70px;
    margin-top:70px;}
<div class="main">
  <div class="zoomin submain a">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
  <div class="zoomin submain b">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
  <div class="zoomin submain c">
    <img src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" title="All you need to know about CSS Transitions " />
  </div>
</div>

Upvotes: 1

Related Questions