Columns equal height - Stretch images

Arteaster

Hello !

I want to make equal heights columns and on the left and right side ( but really doesn't matter which side - place ) linked images with hover effects ( Photo Box, Image box e.g. ).

So, I want to stretch images.

Is there something that I should adjust in buider options,  whether the images should be prepared to be the same width and height perhaps, or it's only possible with CSS? 

Section:

Columns | remove horizontal margin

Columns | remove vertical margin

Full Width

https://be.arteaster.com/stretch-images-equal-heights/

https://i.ibb.co/92W8w8L/XRERlQQ.jpg

Thanks

Phil

Hello,
Only option is to put three wraps, and set background images of the left and right wrap (instead of image items).
Also, you will have to set "Background | Size" to cover in these wraps, and "Equal Height of Wraps" in section options.
https://prnt.sc/vd7r6h
https://prnt.sc/vd7rdy

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Arteaster

OK, it's clear,  but then there is no image hоver effect. 

That's an idea - suggestion for future updates. 

Thanks.

Phil

It would be great if you post your idea for features in this topic
https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest

This will help us expand our product and make it easy and friendly to use for our customers.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Arteaster

OK,

Best regards

Arteaster

Just to share,

It can be done,

1. Columns in Wrap

2. Give to columns .class-name

3. Choose column background image - Cover

4. Choose column and enter some content - text, to determine height

5. Section:

    Columns | remove horizontal

    Columns | remove vertical margin

    Equal Height | items in wrap

    Full Width // or not

and

.class-name{

   overflow: hidden;

}

 .class-name:hover .column_attr{

    -moz-transform: scale(1.1);

    -webkit-transform: scale(1.1);

    transform: scale(1.1);   /* transform  property */

}

.class-name .column_attr{

    -moz-transition: all .5s;

    -webkit-transition: all .5s;

    transition: all .5s; /* transition property */

}

Arteaster

Works nice

https://be.arteaster.com/stretch-images-equal-heights/