[SicovajaParticipant]

hello

i need your help.
how can i zoom on a picture like here
https://www.internetx.com/

i tried every solution i found but somehow i’m hanging…
http://dev.sicovaja.com.62-new.webflow.de/

thanks for your help

[LelyModerator]

Hello There,

Thanks for posting in.

Please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.zoom-in-effect{
   -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.zoom-in-effect:hover{
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Then add the following CSS to hide the overflow of the container

.js .x-column {
   overflow: hidden; 
}

Then add this zoom-in-effect class in your image

<img class="x-img x-img-none none zoom-in-effect" src="http://dev.sicovaja.com.62-new.webflow.de/wp-content/uploads/2015/03/Colocation.jpg">

Hope this helps.

[SicovajaParticipant]

yes that helped big time! thank you!

i’ve got another question though – is there a possibitity to position my pictured relative to the middle of the text field next to it?

[LelyModerator]

Hello There,

Your always welcome. Happy to help.

If you are referring to vertical positioning of the images, please adjust the value of margin-top on the image itself:

From the current value of 35% try 29% or adjust to your preferred spacing.

<img class="x-img x-img x-img-none none zoom-in-effect x-img-none none" style="margin-top: 29%;" src="http://dev.sicovaja.com.62-new.webflow.de/wp-content/uploads/2015/03/Colocation.jpg">

If not, can you be more specific on the positioning? A screenshot on what should happen would be a great help.

Thank you.

[SicovajaParticipant]

Hello,

I mean that instead of adjusting the margin-top if there is a possibility of positioning relative to the text next to the picture.
For now i have a content band with 2/3+1/3 proportion. In 2/3 is all the Text and in the left third it’s a picture. And a margin-top beween 25% and 35%. But this percentage means 25%/35% of the picture not the container part next to it.
I want to have the picture to be optically in the middle to the text.

Thank you

[FriechModerator]

Hi There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[SicovajaParticipant]

Hey,

here is a shreenshot 😉
http://dev.sicovaja.com.62-new.webflow.de/?page_id=316

thanks in advance

[FriechModerator]

Hi There,

Define a margin-top for the images with same value as the heading. Try to add this under Custom > CSS in the Customizer.

.zoom-in-effect {
  margin-top: 12% !important;
}

Hope it helps, Cheers!

[SicovajaParticipant]

Hey,

I’m sorry but it’s not at all what i want 🙁

I want the pictures to be vertically in the middle of each text that is next to it.

[ZeshanMember]

Hi Sicovaja,

Thanks for writing in!

Vertical alignment isn’t possible out of the box. This requires deep CSS and template modifications to achieve, but regretfully it would fall outside the scope of support we can provide. You may wish to consult a developer to assist you with this.

Thanks for understanding.

[Author]

Posts