Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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.
 
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?
 
What if you tried float: none; when hovering over the images? I haven't tried this out so I'm not sure if it's going to work or not - let me know if it doesn't.
 
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.
 
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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom