• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Images zooming to left when transform

Hey,

I have problem that i have set three images next to eachother with float and then i wanted to set them to zoom on hover but then they are zooming to the left, is this somehow connected with the left float? Or this is caused by something else. And how can i delete this unwanted effect?

btw the images for checking if i am not bot are so hard that even i have problem with that and i am human.

Thank you for your answers.
 

Malcolm

Administrator
Administrator
Staff Team
Hey there,

So from my understanding is that you have 3 images next to each other using float and so when you hover over them it zooms over to the left. Could you tell us which direction your float is going and if possible could you provide us with the code?
 

OldMan

King Coder
Please look at your code. It isn't correct at all. The images are set to 50% and that adds up to 150%. They are not inline.
Code:
    <c2 class="paragraphx1">VRTÁNÍ</c2>
    <r2 class="paragraphx2">MONTÁŽ NÁBYTKU</r2>
 
 
  <br>
  <br>
</h9>
No such thing as <c2> or <r2> and </h9> has no start tag.
 

OldMan

King Coder
Try This:
NEW HTML:
Code:
<div class="row">    
  <div class="drill">
  <img src="drill.png" alt="Italian Trulli" width=200px>
  </div>


  <div class="table">
  <img src="table.png" alt="Italian Trulli" width=200px>
  </div>

   
  <div class="instalation">
  <img src="instalation.png" alt="Italian Trulli" width=200px>
  </div>
</div>

And this for the CSS
Code:
.row{
    text-align: center;
}
.drill{
    margin-left: 50px;
    transition: transform .2s;
    color: white;
    display: inline-block;
}
.drill:hover {
    transform: scale(1.2);
}
.table{
    margin-left: 50px;
    transition: transform .2s;
    color: white;
    display: inline-block;
}
.table:hover {
    transform: scale(1.2);
}
.instalation{
    margin-left: 50px;
    transition: transform .2s;
    color: white;
    display: inline-block;
}
.instalation:hover{
    transform: scale(1.2);
}

You need to set the image widths and notice the css is repeated three times. You might be able to condense that.

I did remove a <div class="zoom"> along with a lot of other things not needed.
 

Top